سيّد صالح 
مختار سم 


الإهداء 


إلى من يَرشّح حُبِهُما من تقوب القلب , 


.. إلى والدي حفظهما الله . 


المقدمة : 


شخصياً و إلى فترة قريبة - نوعاً ما - كنت أعتبرها من التقنيّات التي لا ينبغي لمطوّر تطبيقات 
ال 186 أن يضيّح وقته في تعلمها و أراها من الأمور التي تدرّس في الكليات من باب الثّرف 
العلمي !› نعم .. إنْها لغة 56012371 Java‏ التي تستخدم للبرمجة من طرف العميل » كنت 
أقول لنفسي : " أنت تُبرمج لد #٥1‏ بلغات عليا و من طرف الخادم ع257ه5 فلماذا تنظر 
للوراء ؟ " . 


عنس لو 


بعد فترةٍ ليست بالطويلة أبدت لي الأيام ما كنت جاهلاً 9 أتاني بالأخبار من لم أزوّد فبدأت 
أدرك أهمية البرمجة من طرف العميل و أغير قناعتي نادماً بعد ظهور تقنية 881 التي فتحت 
أمام مبرمجي ال ط٥١‏ حول العالم آفاقاً جديدة للإبداع و بدأت أعودُ و أكتبْ بعض شيفرات 
ال 562154 03732 بغية تنفيذ ما يطلبه العملاء لكن و بين الحين و الحين كان موقفي 
السّبِي من ال +502315 332 يطفو على السَّطح لأنَّنِي كنت مضطرًا لكتابة الكثير من 
شيفرات +12375 5٠‏ 332 لتنفيذ أمور بسيطة - باعتقادي - و استمرٌ الحال هكذا إلى أن 
مَنّ الله علي بمعرفة صديقة جديدة جميلة جداً اسمها ا ©3011 الذي يلفظ "جَي كويري". 


17 ©3011 : مكتبة جديدة محانيّة و مفتوحة المصدر مكتوبة بلغة خمذإ٥ء؟S‏ 3282 تسمح 
لك كمطوّر لمواقع ال ط٥‏ بالقيام بما كان يتطلب كتابة مئات الأسطر البرمجية بأسطر 
معدودة! و قد كتبها المبرمج الكبير 26519 72طاقت في البداية (عام 2006) ثم طورها 
فريق من المبرمجين بالتعاون معه و الهدف من كتابتها تغيبر الطريقة التي يكتب بها المبرمجون 
شيفرات ال +721 5623 33373 على حد قول مبدعها. 

نالت مكتبة 37 ©3013 خلال فترة قصيرة جداً شهرة واسعة أكستها ثقة مواقع أكبر الشّركات 
في العالم مثل ©600901 110211139 و WordPress‏ و Drupal‏ و ELL‏ و الكثير 


من المواقع الكبرى التي كان آخرها موقع الشركة العملاقة +81632056014 التي تبنت 


المكتبة و ضمنتها بشكل افتراضي مع مشاريع لغة البرمجة 4 218115. 258 التي تكتب 
باستخدام بيئة 2010 5211030 7151131 و الجدير بالذكر أن فكرة إنشاء مكتبات 
1م5621 Java‏ ليست فكرة جديدة فقد ظهر عدد كبير من المكتبات قبل ظهور مكتبة 
jQuery‏ إن أن 2237 ©9011 ز كانت الأكثر نجاحاً في مطابقة معايير ال 2 ط٥‏ و الأسهل 
على الإطلاق » كما كانت مكتبة 7 ©3011 المكتبة الوحيدة التي ضمنت أعلى نسبة من 
التوافق مع جميع المتصفحات الشهيرة مثل 186 فما يليه و 2 >+03 7326142 فما يليه و 
3 535321 فما يليه و 9 23عه0 فما یلیه و ©2012 6009616 و غيرها من 
المتصفحات و السب الأهم في انتشار المكتبة و نجاحها هو صغر حجمها إذ أنه لا يتجاوز ال 20 
كيلوبايتاً فقط ! 


خسنا ١‏ ا مد عنوان هذا الات ستحاون عل :هذه الممة معا و إنثانها خان ساعنيت 
فقط! و الكلام هنا موجه لمن يعرف .811415 و 055 و قليلاً من لغة خمذإءء 3252 
التقليدية حيث أن المحتوى في هذا الكتاب - بإذن الثه - ليس من ذاك الذي كثيراً ما نعاني 
منه في كتب المعلوماتية و خاصّة ما يتحدث عن لغات البرمجة منها , إذ نجد المؤلف يفجّرٌ في 
وجه القارئ عشرات الأسطر البرمجية غير المفهومة ثم ينتقل إلى فقرة أخرى قبل إزالة شظاياها 
عن وجه الالتباس » و هو - إن شاء الله - ليس من الكتب التي لا تقول أي شيء عدا العناوين 
متعلّلة بعلل الاختصار الواهية › و إِنّما حاولت قدر استطاعتي جعل المحتوى في هذا الكتاب 
بقول ما يجب قوله فقط و اجتهدت كي تكون المعلومة فيه مكثفة و بسيطة و واضحة بإذن الله 
ختاماً أسأل الله عرّ و جل أن يجعل عملي هذا خالصاً لوجهه و أن يكتبه من العلم الذي ينتفع 
به » كما أدعوه جل جلاله أن تثبت التجربة لقارىٌ هذا الكتاب أن عنوانه ليس عنواناً تجارياً و 
لا وعدا كاذباً تمر به رياح الصّيف دون نتائج ملموسة . 


مختار سيّد صالح 


من الدقيقة 0 إلى الدقيقة 8 : 


أساسيات 27 ©0116 3 


تشيت 1011617 و تضمينها فى صفحتك : 


قبل أن تبدأ معی فى الولوج إلى عالم المكتبة 277 ©3011 عبر دقائق هذا الكتاب يحب أن 
تقوم بتحميلها أولا من خلال الدخول إلى موقعها الرسمي 17.0010 عدي .77 و النقر 
على زر ٥2d‏ ۸1سDow‏ الواضح فى الصورة : 


يفترض أن يكون بحوزتك ملف 
بالاسم 9011©6217.3[5[ و هي 
النسخة الكاملة من المكتبة و 
ملف آخر هو الملف 
11-5--1277 90116( و هى 


كامل ميزات النسخة الكاملة مع 
اختلاف بسيط في الحجم إذ أن النسخة الخفيفة ذات حجم أقل » قم بنسخ أحد الملفين إلى 
المجلد الذي يحتوي مشروع ال ط٠۷‏ الخاص بك و أضف التعليمة التالية إلى رأس الصفحات 
التي ترغب باستعمال المكتبة فيها بين وسمّي <2©20> و </2©620> : 


<script src=” jQuery.j]js” type=”text/Javascript”> 

</script> 

و التعليمة السابقة هى تعليمة بسيطة - كما تعلم - تقوم بتضمين ملف 5601231216 3573[ 
مُعيّن فى صفحتك لتستخدم إمكانيّاته و وظائفه لاحقاً » يتم تحديد هذا الملف عبر الواصفة 


52 التي تحمل قيمة تعبّر عن مسار هذا الملف بشكل مطلق أو بشكل نسي و في السّطر 
السّابق فإن القيمة 3277.35 ©3011 تعنى مساراً نسبياً يشير إلى الملف ذو الاسم 


5. 277 ©7011 الموجود في نفس المحلد الذي يحتوي مستند ال طع8آ الخاص بنا » و 
هكذا نكون قد نجحنا فى تضمين المكتبة ضمن الصفحة و بالتالى أصبحنا جاهزين للبدء فى 
قراءة الدقائق التالية. 


ء۶ 

اساسیات 10101617[ : 

تتكون مكتبة 277 ©3011 بشكل رئيسي من خمسة أقسام هي : 

.Events الأحداث‎ -3 .Functions الدّوال‎ -2 .Se1ectors المحَدّدات‎ -1 

4- الحركات 221103810115 . 5- الإضافات 21116311215 . 

و كما قلت فى المقدّمة فإن هذه المكتبة تسعى لتسيط الأمور عند الحديث عن كتابة شيفرة 
J ava Script‏ لمنح تطبيقاك مزیدا من التفاعلية إن أن المكتبة 117 ©011[ تقوم بتغليف 
مجموعة كبيرة من الأسطر البرمجية ضمن تابع سيط حدا مما يسمح لك كمطور لتطبيقات ال 
طe‏ بالتركيز على وظيفة التطبيق فقط . 

تتمحور الفكرة الرئيسية لمكتبة 227 ©3011 حول تطبيق تعديل أو حركة أو دالة ما على قسم 
محدد من صفحة ال ا عند تفحير حدث معين » و يتم تحديد القسم المراد إجراء التعديل 
عليه باستخدام المحدّدات » و بالطبع سنقسّم الدقائق المتبقية لمناقشة كل من أقسام المكتبة 
بشكل مفصل و واضح بإذن الله. 

وأنت يا صديقي الذي لم تتضح لك فكرة عمل المكتبة الرئيسية (يُفتَرض أن أصدقائي كثر في 
هذه المرحلة) ما رأياك فى مثال عملى يوضح أحد تطبيقات مكتبة 377 ©3011 على أرض 
الواقع ؟ 


ادخل للموقع الرائع ©66060601 لترى صفحة مشابهة لمايلي (حتى تاريخ كتابة هذا الكتاب) : 


„Exceptionally Useful AJ 1F فلن‎ > Get More A4d-o¬s j) > جل السفشلة .| ب ع نا٣۸ ادا > 2 علامة تبريب جديدة |8 مراع مقترحة‎ 
٠Q > آيرات‎ ٠ الصفحة > أمان‎ > 4# - 5 +: 5 x Google $ Windows Live Hotmail @ > B3 


Google 


ڪڪ 


لاحظ أن الصفحة الخاصة بموقع محرك البحث ©600961 لا تحتوي على أي شىء عدا ما 
هو ظاهر في الصورة (شعار الموقع و مربع البحث و الزرين الخاصين ببدء عملية البحث) › و 
الان حرك مؤشر الفآرة في الصفحة و انظر ما سيحدث ! .. نعم سترى ما يشبه الصورة التالية: 


العفضلة .| ولج ١ع‏ 8/5 اها + ع علامة تبويب جديدة 2 موافع مقترحة + ]€ Exceptionally Useful AJ 17 @ > Get More Add-ons‏ ... 
“a x< Google 4 Windows Live Hotmail @ - B3‏ > 3 @ > الصفحق + أمان > ليرت ٠‏ 69> 
ويب صون خرائط الأخبال تزجمة تقوع |2003 المزيد ؟ mohktar@ gmail.com | Google‏ | حسلي | الخروح ^ 
9 
بت طفع 
جارات 
عات اللنة 
اضرية حظ 
@ البحت في ويب © اليحت في السفمات العربية. 
البرنامج الإعلاني - كل ما تحب معرفته عن 19و00 هنا - انف الى عاو 6٥0‏ فى عو زه تكلا 
46 للتسيمية 
تم © انترنت | وضع اتتشغيل العحمي؛ تشغيل هك + Ne‏ 


لو انتبهت فإن ظهور المحتويات الحديدة فى الصفحة (أعنى الروابط 1:12125) تم بحركة 
متلاشية جذابة تدعى بالظهور المتلاشى 172 7306 . 


حسناً .. ما رأيناه هو مثال ممتاز يستخدم مكتبة ررد ذ فعلياً ‏ فهو مثال عملی على تطبيق 
حركة 13 306 على جزء من الصفحة (الروابط 1112125) عندما تم تفجير حدث معين 
(مرور الفأرة فى المنطقة الفارغة من الصفحة). 

الأمر لحد الآن طبيعى لكن المذهل فى الموضوع أن ما رأيته تم بكتابة سطر واحد من أبسط 
ما يكون و هو مشابه للسطر التالي : 


اه 
نعم كل هذا الجمال بسطر واحد فقط ! . 


كمثال آخر ادخل لموقع شركة +11320501421 الموضح في الصورة: 


n - Windows Internet Explorer لله‎ 


microsoft.com ابن‎ default asp 00 0 


جل اسفضلة | ج € علا اا > جز علاعة تبريب جنيدة ٠‏ 8 مرائع مقترحة + | Exceptionally Useful AJ 17 7 Get More 4ê. os‏ 


© - 5 x Microsoft Corporation [U Windows Live Hotmail @ 


Windows 7 Enterprise 
Reduce management Costs, improve productivity, and 
manage risks. Download and test in your environment » 


Apeaı 2d ممم‎ 

£ SMOPUIM 
هاو‎ | 
LU 


SUES‏ #نام dn a21‏ همد 
JOSOMIN‏ مررادة 2/002 


For fr 
اتترنت | وضع اتتشفيل المحصي؛ تشفيل‎ © 5 


حاول أن تتجول في الصفحة و استمتع ! 


لا تدع هذا الجمال يخدعك لتعتقد أن الصفحة مبنية باستخدام برنامج 81351 إذ أن معظم 
ما رأيته في الصفحة من قوائم 862115 و ألسنة 8855 و حتى المزلاج #هل 511 في نسخة 
سابقة منه يعتبر شيئاً بسيطاً من تطبيقات مكتبة 17 ©3011 الكثيرة (للأمانة : النسخة الحالية من 
المزلاج تستعمل تقنية 511562136011) . 


المزيد من الأمثلة ؟ 

حسناً ..يمكنك الانتقال لدقائق استعراض أهم الإضافات في نهاية هذا الكتاب أو فعليك 
بموقع المكتبة نفسها مع أنني أرى أن مثال أفضل من موقي ھ60031 و 2050141 1/13 
أكبر شركتي برمجيّات في العالم » هذا العالم ذاته الذي دفعته تجارب الشركات العملاقة للثقة ب 
jQuery‏ و هذا ما يدفعنا نحن أيضاً للبدء في الحديث عن طريقة استعمالها عسى أن نرى 
مواقعاً عربية تنافس بقوة في هذا المجال و هذا ليس بعيداً على وطن عربي ينضح آلاف 
المبدعين الطموحين. 


طريقة استعمال 011177[ : 

بشكل عام و طاغ بعد أن تقوم بتضمين المكتبة ضمن الصفحة كما ذكرنا سابقاً ستقوم بكتابة 
شيفرة اع 56021 5373 عصرية (و غير طويلة ©) باستخدام مكتبة 217 ©3011 ليصبح شكل 
صفحتك النهائى كمايلى : 


<html> 


<head> 
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SEE DIE 


<script type=/”text/javascript”> 


$ (document) . ready (function () { 


شيفرة جي كويري هنا 
)م 
</script>‏ 
</head>‏ 
<body>‏ 
محتوى صفحتك (الظاهر) سيكون هنا 
</body>‏ 


</html> 


إن كان لك خبرة بسيطة جدا في كتابة مستندات ء111 فأكاد أقسم أنك لم تواجه أية مشكلة 
مع ما سبق من شيفرة إلا مع الأسطر التالية : 
(document) . ready (function )( 1‏ $ 
شيفرة جي كويري هنا 
)1 
و أكاد أقسم أيضاً أنك سترتاح إن قلت لك أنه ليس من الضروري أن تفهمها - الآن على 


الأقل- و لكن من المهم أن تتذكر شيئا واحدا : من المحظورات البرمجية على أي مبرمج 
يعتمد على 7 ©3911 أن يكتب أي شيفرة خاصة بالمكتبة خارج المنطقة المخصصة لشيفرة 


11 


17 3 و هى الموضحة فى الأسطر السابقة و من هذه النقطة إلى نهاية الكتاب بغية 
التسهيل و عدم الإطالة لن يذكر الكتاب كامل شيفرة الصفحة و إنما سيركز على الفقرة المطلوبة 
فى كل مرة لكن أنت ستتذكر أن جميع شيفرات ال 237 ©3011 توضع فى هذه المنطقة. 

و الآن يمكنك الانتقال مباشرة للدقائق المخصصة للمحدّدات و تجاهل الأسطر القليلة التالية 


إلا إن كنت ممن يحب معرفة كل شيء فحينها يتوجّب عليك أن تقرأ الفقرة التالية . 


ما معنى الشيفرة السابقة ؟ 


تعتمد مكتبة 30901161217 على شحرة ال 1014 (شجرة كائنات المستند Data Object‏ 
1 بشكل كلي في عملها و كما تعلم فإن بناء هذه الشجرة لا يكتمل إلا بعد اكتمال 
تحميل الصفحة و في خطوط الانترنت البطيئة كال نا 23321 مثلاً قد يستغرق اكتمال 
تحميل الصفحة بعض الوقت الذي إن تم التلاعب بمكونات 2014 أثناءه سيؤدي ذلك إلى 
إفساد شجرة كائنات المستند 2014 و بالتالي إفساد صفحتك. 

و لأنّ مكتبة 17 ©3011 كَيِبَتْ في محاولة لجعل الحياة أسهل فإنَّ مهمة الأسطر السابقة ببساطة 
هي التحقق من اكتمال تحميل المستند و اكتمال بناء الشجرة قبل السماح بتنفيذ أي شيفرة 


j 016 37‏ حفاظاً على سلامة صفحتك و على سمعة المكتبة . 


والآن تستطيع القول بثقة أنناك ممن يتقنون أساسيات مكتبة 32137 ©3911 بالنسة لمعايير هذا 
الكتاب .. مبارك مبارك. 
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من الدقيقة 8 إلى الدقيقة 32 : 
و اض 

المحددات 

Selectors 


و 
المحددات : 
هل تذكر كيف كان الحال قبل أوراق الأنماط Cascading Style Sheets‏ أو 
ما يعرف اختصاراً ب 88© ؟ 
كما تريد .. دعنا من المآسى و لننظر كم أصبحت حياة مصمم ال ا١١‏ جميلة بعدها » يكفى 
لتغيير حجم الخط الخاص بكافة النصوص المكتوبة ضمن الوسوم ع أن تكتب في ورقة النمط: 
p{ font-size:medium; }‏ 
و يكفي لتغيير لون كافة الروا بط الموجودة ضمن الصفحة أن تكتب في ورقة النمط : 
J‏ 256151251618 21 
و يكفي لتغيبر نوع الخط الخاص بكليهما معا أن تكتب في ورقة النمط : 
p,a{ font-family:Tahoma,Arial; }‏ 
و يكفي لتغيبر عرض إطارات جميع الصور الموجودة ضمن وسم ينتمي للصّف 11111223 
أن د 2 تكتب في ورقة النمط : 
.Mukhtar img{ border-width:medium; }‏ 
حسناً .. الكلام السابق ليس بعيداً عما أريد قوله خصوصاً إذا عرفت أن استخدامنا د 2 و ص و 
2ه و .Mukhtar img‏ يدرسه متعلمو ال 55© تحت عنوان المحدّدات 
Selects‏ » و كما يبدو من اسمها فى 32177 ©3911 فإن المحدّدات Selectors‏ 


تستعمل لتحديد مجموعة من عناصر مستند ال ا۷6 (صفحة ال ,111141) فى البداية ليتم تطبيق 
شبيء من دوال أو حركات 9116237 ز عليها لاحقا. 
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هنالك عدن كبير من المحدّدات التي تعطيك المرونة الكافية لتحديد ما تريده بالضبط و يكفي 
أن أخبرك أن محدّدات 055 التي تعرفها ذاتها تعتبر بعضاً من محددات 7[ ©3011 بما فيها 
محدّدات النسخة 3 655 (ال 3 55© لم تُطبّق حنّى لحظة كتابة الكتاب و إِلّما صدرت 
معاييرها فقط) مما يعني أنك تعرف الكثير عن المحدّدات مسبقاً. 

لكي تقوم بتحديد عدد من عناصر الصفحة في 237 ©7011 يجب أن تكتب شيفرة 1127© 
بالشكل التالي : 


8 مده 65ت التق" JOEL YK‏ 


$ ( selector’); 
حيث أن ٣ه ٠1ه5 يمثل المحدّد الذي يعنى مجموعة معينة من عناصر الصفحة و فى‎ 
هذه الدقائق سنتعرف على مختلف القيم التى يمكن أن تكون محددات صحيحة › و فى‎ 
الحقيقة فإن $ أو ©3011 يعتبران اسمين لتابع واحد و عليه فإن الحملتين‎ 
و (2ه0غ2ع5616) $ متكافئتان و لكنّ غالبية المبرمحين‎ jquery )selector) 
يفضلون الشكل الثانى لأنه أقصر أو ربما لأنه يذكر البعض منهم بتعريف المتغيرات فى 2118 إن‎ 
كانوا من مبرمجيها.‎ 
و كمثال عملي على الموضوع يمكن أن نقوم بتحديد جميع الروابط الموجودة في الصفحة‎ 
باستخدام المحدد 3 الذي يعنى جميع عناصر الوسم 3 الموجودة فى الصفحة و عندئنٍ تكون‎ 
التعليمة التى تقوم بهذه الوظيفة:‎ 
SOA 


او : 
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OEE (A 8‏ 
و يمكن أن نقوم بتحديد كافة الصور الموجودة في الصفحة باستخدام المحدد 317209 بأحد 
الشكلين : 
(img);‏ $ 
أو 
J OEE FUME J Fo‏ 


و كما تلاحظ فإن المحددين 3 و 17096 هنا يستخدمان بنفس الصيغة الخاصة بمحددات أوراق 
الأنماط التي تعرفها » و كمثال على استخدام محدد آخر يمكن أن نقوم بتحديد كافة خلايا 
الجداول الموجودة في الصفحة و التي تحتوي على صورة داخلها باستخدام المحدد 
( 19 ) 235 : 24 بإحدى الصيغتين : 


S(T ECE MEAS (IME) ” م‎ 


J OE EY ( ECE MES (TMG) £) 

أتمنى أن تكون الفكرة الخاصة بالمحدّدات قد اتضحت الآن لتقوم حينها بتحربة بعض 

شيفرات yعإع9u]‏ الخاصة بالمحدّدات فى صفحتك بشكل فعلى لتنتج صفحة مشابهة 
لمايلى: 


<html> 


<head> 
ECE LOE 31565759512515 EMIS 53256/55616115 


</script> 


ene 111 
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<script type=/”text/Jjavascript”> 
$ (document) . ready (function () { 
$('a’); 
$ ( img’); 
$ ) 'td:has (img) ’) : 


})7; 


</script> 


</head> 


<body> 
محتوى صفحتك (الظاهر) سيكون هنا‎ 
</body> 


</html> 


قد تستغرب إن لم تر أية تغييرات على الصفحة بعد كتابة شيفرات 2177 ©3911 الحديدة فيها و 
هنا يجب أن نوضّح أن استخدام المحدّدات لا يتم بمنأى عن دوال المكتبة حيث يجب أن 
يترافق استخدام المحدّدات الخاصة بالمكتبة مع استخدام إحدى دوالها على الأقل ينتج 
تغييرٌ ملموس في الصفحة و هذا شيء سنتعلمه بعد دقائق قليلة لكن حالياً يجدر بك أن تعرف 
أن استخدام الأسطر السابقة قام بتحديد ما تريده تماماً و لم يقم بأي تغيير و ما أريد قوله 
باختصار : "المحدّد يكتفي بتحديد جزء من الصفحة بينما تقوم الدوال بتغييره" ..هذه نقطة 


جوهرية يجب أن تفهمها قبل المتابعة . 
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ملحوظة : في نهاية الآمر 5 و 217 ©0211[ ليسا إلا اسمين لتابع يعيد مجموعة العناصر التي 
يحددها المحدد 561668602 على شكل مصفوفة من العناصر (النمط 
array>element>‏ بالنسة لمبرمجي 50217218 33373) و هذا ما يعرف بالإنجليزية 
ب jQuery Wrapped Set‏ على رأي المكتبة و في توثيق المكتبة يدعونه أيضاً 


بالنمط 0116237 و اختصاراً . 


حسناً .. الصيغة السابقة تكفى لتحديد جزء من عناصر المستند › عندئنٍ يصبح بإمكانك تطبيق 
إحدى دوال (توابع) أو حركات المكتبة على الحزء المحدد بشكل مشابه لمايلى: 

J 4E DUMCET ONA (£‏ 056162 5 
حيث أن ٥۸‏ ذا صتا هو اسم الدالة أو اسم الحركة التي تريد تطبيقها › و يعيد تنفيذ هذه 
الجملة (الدالة فى الحقيقة) و غالبية حمل (دوال) 27 ©9116 3 مصفوفة من العناصر من النمط 
jQuery Wrapped Set‏ ھی العناصر ذاتها التى قام المحدد selector‏ 
بتحديدها و لكن بعد إحداث تغيير ما عليها › و لنأخذ السطر التالى على سبيل المثال : 

$ (‘selector’ ).hide (); 

يقوم المحدد 521680 بتحديد مجموعة من عناصر المستند تعيدها الدالة ۶ كما هي 
بينما تقوم الدالة ©1230 بإعادة هذه العناصر ذاتها بعد أن تغير خاصية ظهورها إلى حالة عدم 
الور 
و من المهم أن نعرف أننا نستطيع تطبيق أكثر من دالة على المحتوى الذي يعيده أحد 


المحدّدات فمثلاً يمكننا كتابة : 


57 SELEC EOE J). لمهت مصدة‎ (J . مضنا‎ 6 16152 )1( $ 
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حيث أن السطر السابق سيقوم بتنفيذ الدالة 2112618310121 على المحتويات التي يعيدها 
المحدد 5816802 ثم يقوم بتنفيذ الدالة 121111213120112 على المحتويات التي تعيدها 
الدالة 211238301221 و بما أن النمط الذي تعيده هذه الدوال هو نفس النمط الذي يمكن 
لها نفسها استقباله فهذا يعني أن الدالتين 2112313120121 و 21131283012 ستطبقان على 
المحتوى الذي يعيده المحدد 52160+01 بنفس ترتيب استدعائهما و عليه فإن شيئاً 
كمايلي: 


O?‏ هه الا J VeRO‏ 856168188157 7 1ه 
يعتبر صحيحاً تماماً و هو شىء رائع لأن هذا يعنى أنك تستطيع تنفيذ عدن 2 من الدوال على 
نفس العناصر التى يعيدها المحدد بحيث يكون خرج كل من هذه الدوال دخلاً للدالة التالية 
لها و كل هذه الروعة تعتبر تعليمة واحدة فقط لدى أهالى قبيلة 207 ©3011 ! 
فمثلاً يمكنك كتجربة واقعية أن تكتب مايلى : 
.fadeOut )( . 30001355 ( red’);‏ ( "3 ') 5 
حيث ستقوم هذه الجملة عند تنفيذها بالبحث عن جميع الروابط فى الصفحة (لأن المحدّد 
المستخدم 2 يعنى جميع الروابط) ثم تقوم بتطبيق تأثير +2206013 عليها جميعاً و بعد ذلك 
تجعل قيمة الصف الخاص بورقة الأنماط 1358© 055 الذي تنتمى له هو الصف 260 
(بمعنى آخر : تضيف الواصفة “0 ©<2 ”=55ه1ء للعناصر المحددة ) . 
قبل أن نستعرض المحدّدات كاملة دعنا نكتب الشيفرة التالية لصفحة تستعمل 1217 ©3011 بعد 
التأكد طبعاً من أن مسار 337 ©3011 المضمن و اسم ملف المكتبة صحيحان . 
لهك 


<head> 


<1 1ا />أول اختبار لجى كويري الرائعة< ٥1ا‏ 1> 
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5236110155 SECT 16157 JS اكت و رع‎ 8 5/1 5768 16 6 
> / 5618 186 
<script type="text/jJavascript"> 
$ (document) . ready (function () { 
$ ('#Button1l’ ( .click (function () 1 
5 ) '#TextAreal’) .toggle (‘slow’); 
}) 
)م‎ 
</script> 
</head> 
<body> 
تضم‎ MEA LEME EOL CVE LOUIE EOL 721116-" انقرني لتجربة‎ 
"المكتبة‎ /< 
lexlarea 14 lTexlAreall Mame-"Sl ll G/leXESFeAZ 
</body> 


€ OEMS 
نتيجة لتنفيذ الصفحة السابقة و النقر على الزر ستشاهد أبسط ما يمكنك عمله باستخدام مكتبة‎ 
. JQuery 
ما يهمنى الآن أننا استعملنا الشيفرة التالية:‎ 


5 (E TS EAE تله( لل‎ (SLOWS) 7 
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للوصول إلى العنصر ذو المعرف TextAreal‏ ف الصفحة 9 عمل ما شاهدته ف المثال 
باستخدام الدالة © 2096961 التى سنناقش عملها فی دقائق الدوال و قد تم تحديد العنصر ذو 
المعرف 21٠إA٤×١٠1‏ عن طريق المحدد 226©31غعدهع#1 . 


ملحوظة : + ©5 172322560 237 ©3011 ليست أكثر من مجموعة عناصر محددة ضمن صفحة 
ال ط الخاصة بناء و سميت بهذا الاسم اصطلاحاً لأننا نقوم بتحديدها أولاً بغية القيام بنوع 


من عمليات 27 ©3013 عليها لاحقاً كالحركات أو الإضافات . 


تذكر : العناصر التى يعيدها استعمال الدالة $ أو نان 136 ز مع المحدّدات تسمى 217 ©3011 
Wrapped Set‏ أو JQuery‏ اختصاراً. 


و لأن المحدّدات الخاصة بالمكتبة كثيرة فإن تخصيص فقرة لكل منها سيؤدي إلى إنتاج كتاب 
من النوع الثقيل وزناً و الخفيف علماً » و بدلاً من تخصيص فقرة مستقلة لكل محدّد من 
المحدّدات سنناقش جميع المحدّدات في الجدول التالي بشكل يوضح عمل كل منها بسهولة و 
هذا أولاً و كي يكون لدينا مرجع سريع لجميع المحدّدات (لمن يحب السرعة) ثانيا: 


المحدد Selector‏ الوصف Description‏ 
يعني جميع العناصر الموجودة في المستند 


يعني جميع عناصر الوسم 1 في المستند (مثلاً م يعني 
جميع عناصر الوسوم ع التي في الصفحة و 2 يعني جميع 
عناصر الوسوم 3 و 1700 يعني جميع عناصر الوسوم 1100 
وهكذا) 


يعني جميع عناصر الوسوم التي تنتمي لصف الأنماط © 


(الوسوم ذات الواصفة 1255-7 أياً كان نوعها) 


يعني جميع الوسوم التي تنتمي لصفوف الأنماط 
المذكورة 01 و02 و ٥3‏ و ہ٤‏ و كل ما تم ذكره 


يعني جميع عناصر الوسوم ذات المعرّف × (الوسوم ذات 
الواصفة ”3-76 أياً كان نوعها) 


يعني جميع عناصر الوسوم ۳ الموجودة ضمن عناصر 
وسوم '1 بشكل مباشر و غير مباشر 


ی ا ع ا ا اللا ا 
ys‏ 


(عندما نكتب مثلاً 41<2 فإننا نعني جميع الروابط 


الموجودة ضمن ادك بشكل مباشر فلو كان هذا ال 
37 ذاته يحتوي على جدول و أحد خلايا هذا 
الجدول تحتوي على رابط فلن يكون هذا الأخير من 
ضمن الروابط التي يعيدها المحدد › عندئنٍ يمكننا أن 
نستخدم الصيغة السابقة 2ح 417 لتحديد كل الروابط 
التي ضمن وسوم 035 بشكل مباشر أو غير مباشر) 


يعني جميع عناصر الوسم ۳ المجاورة لعناصر الوسم 1 
(يقصد بالعناصر المحاورة العناصر الأبناء من نفس 


المستوى) 


T[A=value] 


T[A^=value] 


T[A$=value] 


يعني جميع عناصر الوسم ١‏ التي تحتوي داخلها عنصرا 
ابنا واحداً على الأقل من الوسم ۴ (مثلاً 
(3) 235 : ©7351 يعني أي جدول يحتوي رابطاً 
واحداً أو أكثر من رابط ضمن محتوياته) 


يعنى جميع عناصر الوسم 1 التى تعرف الواصفة 2 مهما 
كانت قيمة الواصفة 2 (مثلاً تستطيع أن تكتب المحدد 


a ]226 5 [‏ لتعيد جميع الروابط التي تحتوي على 
واصفة + ©1222 مهما كانت قيمتها) 


يعني حميع عناصر الوسم ٣آ‏ التي تعرف الواصفة ۸ م 
أن تكون قيمة هذه الواصفة هي القيمة 73111 (مثلا 
تستطيع أن تكتب المحدد a[target=_ blank]‏ 


لتعيد جميع الروابط التى تفتح فى نافذة هدف جديدة) 


يعني جميع عناصر الوسم ۳ التي تعرّف الواصفة ۸ شرط 
أن تكون بداية القيمة التي تحتويها هذه الواصفة هي 
القيمة ©72111 ( فمثلاً لو أردنا تحديد كافة الروابط التي 
تنقلك لموقعم يبدأ بحرفي مهلك فالمحدد 


[ع0 . a ]hre£^=w ww‏ يلبى حاجتنا تماما) 


يعني جميع عناصر الوسم 1 التي تعرف الواصفة ۸ شرط 
أن تكون نهاية القيمة التي 3 تحتويها هذه الواصفة هی 
القيمة 73111 (المحدد [2053. ->22©25] a‏ على 


سبيل المثال يعني جميع الروابط التي ند تشير إلى ملغات 


T[A*=value] 


selector:first 


selector:last 


selector:first-child 


selector:last-child 


يعني جميع عناصر الوسم 1 التي تعرف الواصفة ۸ شرط 
أن تكون القيمة التي تحتويها هذه الواصفة تتضمن القيمة 
value‏ (المحدد a[href*=great]‏ يعني 
جميع الروابط التي يحتوي عنوانها على الكلمة 
(great‏ 


يعني أول عنصر مطابق للمحدد 802+ 5616 على 
مستوى المستند (استخدام المحدد 212516 : 3 على 
سبيل المثال يعيد أول عنصر رابط في المستند و 
استخدام المحدد +2125 : 109 بذك يعيد أول 


عنصر صورة موجودة ضمن وسم div‏ في المستند) 


يعني آخر عنصر مطابق للمحدد 2م5616 على 
مستوى المستند 


يعني أول عنصر ابن مطابق للمحدد 5۵1٥٤٤٥۴‏ على 
مستوى المحدد (إذا استخدمنا على سیل المثال 
المحدد 21251-01211104 :3 017 فإننا نعني كل 
أول رابط موجود ضمن كل وسم اتل في المستند و 
ليس أول حالة مطابقة للمحدد فقط كما هو الحال مع 
(first‏ 


يعني آخر عنصر ابن مطابق للمحدد ه80 ©5616 على 


selector:only-child 


selector:nth-child(n) 


selector:nth- 


child(even) 


selector:nth- 


child(odd) 


selector:nth-child(Xn) 


يعني العنصر الابن المطابق للمحدد 18017 ©5616 شرط 
أن يكون وحيدا في وسمه (لو أردنا أن نعيد جميع 
الروابط الموجودة ضمن وسوم 415 شرط ألا يوجد 
أكثر من رابط ابن مجاور في كل 0435 فإن استخدام 
المحدد 02177-1114 a:‏ 417 سيلبي مطلبنا) 


يعني العنصر الابن رقم 2 المطابق للمحدن 
selector‏ ) مثلاً لو أردنا تحديد الرابط الرابع 


الموحود في کل وسم div‏ فإننا تكتب المحدد 
التالى )4( (div a:nth-chil1ld‏ 

يعنى العناصر الأبناء ذات الأرقام الزوجية المطابقة 
للمحدد selector‏ 

يعنى العناصر الأبناء ذات الأرقام الفردية المطابقة 
للمحدد selector‏ 

يعنى العناصر الأبناء ذات الأرقام التى من مضاعفات × 
(مثلاً فى حالة كون ال × يحمل القيمة 3 فإن المحدد 
النهائى يصح (3۸) 282-1110 : 3 417 ويعلى 
جميع الروابط الموجودة في وسوم 4177 على أن يكون 
ترتيبها من مضاعفات العدد 3 و هذه الروابط ھی الرابط 


الثالث و السادس و التاسع و الثاني عشر و الخامس عشر ... 


selector:nth- 


childXn+Y¥) 


selector:even 


selector:odd 


selector:eq(n) 


selector:qt(n) 


selector:lt(n) 


يعني لا عنصراً ابناً بعد كل × أبناء (مثلاً في حال کون 
قيمة لا هي 2 و قيمة × هي 3 سيصبح شكل المحدد 
النهائي (32+2) div a:nth-child‏ و هذا 
يعني تحديد رابطين بعد كل ثلاثة روابط من أبناء اذك 
مما يعني الروابط الرابع و الخامس(رابطين بعد الرابط 
الثالث) و السابع و الثامن (رابطين بعد الرابط السادس) و 
العاشر و الحادي عشر (رابطين بعد الرابط التاسع) .... و 
هكذا) 


يعنى العناصر ذات الأرقام الزوجية المطابقة للمحدد 


مداه 5616 على مستوى المستند 


يعنى العناصر ذات الأرقام الفردية المطابقة للمحدد 
اه 56166 على مستوى المستند 


يعنى العنصر ذو الترتيب 12 المطابق للمحدد 
داه 5616 على مستوى المستند 


٣إectoاse‏ و جميع العناصر المطابقة التى تليه على 
مستوى ا لمستند 


يعني العنصر ذو الترتيب 2 المطابق للمحدد 
هط ءع 1ع 5 و جميع العناصر المطابقة التى تسبقه على 


:animated‏ يعنى جميع العناصر التى تخضع لحركة حالياً (سنناقش 
الحركات فى دقائق قادمة) 

:button‏ يعنى جميع عناصر الأزرار الموجودة فى المستند سواء 
كانت من النوع 5116:0312 أو +2656 أو النوع 
ut ton‏ بشكل عام 


check boxes يعنى جميع عناصر صناديق الاختيار‎ :checkbox 


:checked‏ يعنى حميع عناصر صناديق الاختيار المحددة (أعنى 
بالمحددة ما يكون حالتها dەckeەcne‏ سواء أكانت 


(radio button أو‎ check box 


:contains(s)‏ يعني جميع العناصر التي تحتوي على النص 5 (مثلاً يعيد 
المحدد (7ة3011©621) contains‏ : م جميع عناصر 
النصوص التي تحتوي على كلمة ©3013 و يجدر 
الإشارة هنا أن هذا المحدد حساس لحالة الأحرف 
فالكلمة ۲٥s‏ تختلف عن 5٤ر‏ و تختلف عن 58:5ل1) 


5212 : يعنى حميع العناصر المعطلة (العناصر غير الفعالة) 


يعنى جميع العناصر الفعالة 


يعني جميع عناصر اختيار الملفات و هو مكافئ للمحدد 
input ] type=”file’”]‏ 


:hidden 


:not(selector) 


:password 


:selected 


يعني جميع عناصر الوسوم الخاصة بالعناوين 
h1,h2,h3,h4,h5,h6‏ 


يعني جميع وسوم صور النماذج و هو مكافئ للمحدد 
input ] type=image [‏ 
يعني جميع وسوم النماذج 122116 و select‏ و 


button ş textarea 


يعني جميع الوسوم التي لا تطابق المحدن 
selector‏ (مثلاً يعيد 


:input:not (:button) 
النماذج عدا الأزرار منها‎ 


يعني جميع عناصر الوسوم الآباء (التي تحتوي على عناصر 
وسوم فرعية بما فيها النصوص) 


يعني جميع عناصر إدخال كلمات المرور و هو مكافئْ 
للمحدد input ] type=passWOFEd]‏ 


يعنى جميع عناصر أزرار الاختيار 1151012 radio‏ 


يعنى جميع عناصر الاختيار المختارة ( selected‏ 


(options 


يعني جميع أزرار الإرسال 


يعني جميع مربعات إدخال النصوص و هو مكافئٌ 
للمحدد input ] type=textE]‏ 


:visible‏ يعني جميع العناصر الظاهرة 


Selector, Selectors, 


يعني اجتماع جميع عناصر الوسوم التي تعيدها 
مط 5616 ,... 


المحدّدات المذكورة و يقصد بالمحدد هنا كل ما هو 
مذكور في هذا الجدول و هذه القاعدة تعتبر مفيدة جداً 
في حال الرغبة بتحديد أجزاء كثيرة من الصفحة لا 
يستطيع محدد واحد أن يقوم بتحديدها 


لأنني أزعم أن هذا الكتاب هو أوّل كتاب عربي يناقش مكتبة 3217 ©3011 فيجدر بي التنويه 
إلى أن المكتبة لا تزال في إصدارها 1.3.2 حتى تاريخ تأليفه و هنالك المزيد من 
المحدّدات الجديدة التي تضاف إلى كل إصدار جديد من إصدارات المكتبة الرائعة 
17 ©2011 و يمكنك متابعة كل جديد عن المحدّدات بشكل خاص و عن المكتبة بشكل عام 
عبر الدخول إلى موقعها الإلكتروني com‏ . 237 011 و .www.‏ 
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توليد محتويات ,1111311 جدبدة : 


فى كثير من تطبيقات ال Web‏ الغنية Rich Internet Applications‏ يتم 


توليد محتويات :811141 جديدة إضافية للصفحة بعد عرضها فمثلاً فى مركز رفع الملفات الشهير 


www .10111 111210301.‏ الظاهر فى الصورة يسمح لك برفع ملف واحد كحد أقصى 


Login | Register 


le will upload yor 
Ald) to mltiple 
hosting Sites 


Share the maliipload f 
Zink 5) and Kene: 
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Distribute my file(s) ما‎ the following services: 01 


ill upload yoctr‏ علد 
Ald s5) to maltiple‏ 
hosing Sites‏ 


Share the aliiupload 
Zink 5) and Kenefit 


Distribute my file(s) to the following services: 


+ the flk 5) 
E to upload 


MultiUpload 


Please select file: 


File description: 


9 عدم مم‎ 5 MEGAUPLOAD W MediaFire 5 ®*SHARE 

i Oaks, 7 deposit 5 FER mM نكم‎ 
5 

Send delivery القع‎ wîth download link From e-mail: To e-mail: 


MurltiUpload 


+ the flk 5) 
E to أصله‎ 


Please select file: 
File description: 


Please select file: 


File description: 


9 عمم امم‎ I MEGAUPLOAD 1١| م وعادوذفه 1ل‎ SHARE 

89 i. Wl deposit 9 rene mM يانم‎ 
1 

Send delivery e-mail with download link From e-mail: To e-mail: 


افتراضيا و في حال الحاجة لرفع 
المزيد من الملفات يمكنك بنقرة 
واحدة على الزر 


۴1e‏ أن تضيف ملفاً جديداً إلى 


one more 


مربعات تحديد الملفات في نفس 
الصفحة دون الحاحة إلى إعادة 
توليد الصفحة » و لعل الصور الجانبيّة 
توح الفكرة . 

حيث يظهر في الصّورة الثانية كيف 
إضافة مربع جديد لرفع 
الملفات و لو نقرنا مرة أخرى على 
الزر ©1311 02 عله لأضيف 
مربع جديد آخر و هكذا » و بالطبع 
لا داعي لإخبارك أن هذا يحدث في 
طرف العميل دون أي إعادة تحميل 


اانه 


للصفحة و دون إرسال أي طلب للخادم 5226 » هذا يعتبر مثالاً شائعاً جداً على إضافة 


محتويات .111111 جديدة للصفحة و توفر المكتبة الرائعة 87 ©3011 هذه الإمكانية بساطة 
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شديدة كما كل شىء فيها » فيكفى لإضافة محتوى ,1817111 جديد للصفحة أن تتبع الصيغة 
التالية: 


S(HTMI) 


حيث أن 111 هنا تعني المحتوى الجديد الذي نريد توليده مكتوباً باستخدام لغة 1ا1۲ 
العادية و كما تلاحظ فالصيغة هي ذاتها المستخدمة في المحدّدات › و إن كتابة 
( <> )5 لإضافة عنصر اذل حديد للصفحة تكافئ كتابة ( ' </01757<>03757>' ) $ 
كتسهيل للمبرمجين بمعنى أنه لا حاجة لإغلاق الوسم فالمكتبة تتولى ذلك نيابة عنا مع أنني 
أفضّل استخدام الشكل الكامل لمن يريد أن يطمئن قلبه . 


ملحوظة : يقولون : "لكل قاعدة شواذ" › و كي لا تشذ المكتبة عن هذا القول فإنها للأسف 
الشديد لا تمكننا من إنشاء عناصر الوسم +72 23ج5 باستخدام الطريقة المذكورة. 


عند استعمال هذه الصيغة فإن مكتبة 117 ©7011 تعيد المحتوى الحديد الذي تم إنشاؤه و 
لكنها لا تضيفه للصفحة لتعطيك بذلك حرية إضافته فى المكان المطلوب تماماً من الصفحة 
فمثلاً يمكنك أن تكتب شيئاً مش : 

: ( /#814' )720عمم3 . ( '<415/>محتوى جى كويري جديد<03157>' ) $ 
حيث تقوم هذه التعليمة بإضافة المحتوى الجديد الذي ولدته في آخر المنطقة التى تمتلك 
المعرف لذ تماماً و هذه هى وظيفة الدالة 3526240 إحدى دوال المكتبة المخصصة لهذا 
الموضوع و التي سنتعرف على عملها و عمل أخواتها بالتفصيل في الدقائق التالية . 
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من الدقيقة 32 إلى الدقيقة 57 : 


الدوال 
Functions‏ 


:Functions الدوا]‎ 

و الآن .. بعد تطبيق أحد المحدّدات باستخدام الطريقة التي تعلمناها قبل قليل و إعادته 
لمجموعة من عناصر صفحتنا أو بعد توليد هذه العناصر فإننا نصبح جاهزين لتطبيق شيء من 
دوال 37 ©3911 أو حركاتها على هذا المحتوى (خ Se‏ 1723255604 2177 ©911() لنعطي 
الحياة لصفحتنا و هذا ما سنناقشه في هذه الدقائق › و سنقوم تسهيلاً بتقسيم هذه الدوال إلى 
محموعات حسب الوظيفة الخاصة بکل منها. 


دوا| التعاما مج واصفات الوسوم Attributes‏ : 
لو نظرنا للوسم التالي على سبيل المثال : 


<img src=“ images/pic1l.gif” alt=” imageOne” title=” image 


one” width=740” height=720”> 


لعرفنا مباشرة أنّها صورة تمتلك واصفات معيّنة كه اط ذإغ غه مثل الارتفاع ٤‏ طو1عط و 
العرض #10 و العنوان ©2381 و النّص البديل +31 و مصدر الصورة ©52 و هذا ما 
يمثله مستعرض ال طعا بعقدة ©2600 من عقد شحرة كائنات المستند »لهذه العقدة محموعة 
من الخصائص 2205628365 تقابل كل خاصية منها واصفة من واصفات الوسم (بلى يا 
صديقي المبرمج .. عقد شجرة المستند تشبه الكائنات في لغات البرمجة غرضية التوجه) . 


ملحوظة : بعد إنشاء شجرة كائنات المستند فإن أي تغيير فى خصائص إحدى العقد سينعكس 
مباشرة على قيمة الواصفة المقابلة للوسم المقابل فى الصفحة و هذا تفسير آخر لمنع المكتبة 
إيانا من تنفيذ أوامرها قبل اكتمال بناء هذه الشجرة. 
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تسمح لنا مكتبة تا ©3911 بالتعامل مع هذه الواصفات أو الخصائص حقيقة باستخدام طريقة 
بسيطة جداً فيكفى لاستعادة قيمة إحدى هذه الواصفات أن نستعمل الدالة غ++2 بالشكل 
التالى: 
لت Le (EAE EE‏ 2 ( 116 )0 5 
لنستعيد قيمة الواصفة 388121111113126 الخاصة بالوسم ذو المعرف 10 و يكفى لإسناد 
قيمة لإحدى هذه الواصفات أن نستعمل الدالة عة بالشكل التالى: 
م اللي 7 الا ا ع را مسي 7 لات ااه 
لنجعل قيمة الواصفة ۸3۳8 اطذإع عة الخاصة بالوسم ذو المعرف 14 مساوية للقيمة 


.value 


أعتقد أنك لاحظت أننى استعملت المحدد #10 الذي يعيد عنصراً واحداً فى العادة (إذا لم 
تضع معرفات مكرّرةَ فى صفحتك) ثم قمت بتغيير إحدى واصفات هذا العنصر و السّؤال الذي 
يطرح نفسه الآن هل ستنحح هذه التعليمة فى حال التعامل مع محددات تعيد مجموعة من 
العناصر ؟ 
توفر المكتبة جواباً لهذا السؤال عبر تأمين طريقة للتعامل مع واصفة ما لمجموعة من العناصر 
عن طريق الدوران على حميع تلك العناصر » فيكفى لقراءة واصفة معينة لجميع عناصر 
مجموعة معينة أن تستخدم الصيغة التالية : 
‘selector’ ( .each ) function (n) 1‏ ) $ 
(this) .attr (attributeName’ ) ;‏ $ 


JY 
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و يكفى لإسناد قيمة واصفة معينة لجميع عناصر مجموعة معينة أن تستخدم الصيغة التالية : 
‘selector’ ( .each (function (n) {‏ ( $ 
(this) .attr (attributeName’ , ‘value’ ) ;‏ $ 


1 
تذكر : فى هذه الحالة فإنّ الكلمة المحجوزة 315ط+ تشير إلى العنصر الحالى أثناء الدوران 
.each‏ 
و لمن لا يحب الدوران طع3»© و لا يريد أن يعود ليتذكر الحلقات التكرارية توفر المكتبة 
طريقة أخرى أسهل لإسناد قيمة واصفة أو مجموعة من قيم الواصفات لجميع عناصر المجموعة 
التي يعيدها المحدد عن طريق استخدام الصيغة التالية: 

7 للقن ) sat Ce‏ 2ه 1586 5ق 7 ) 5 
حيث أن 35011 هو كائن يمثل تلك الواصفات و من لا يعرف 75011 له أن ينتقل إلى 
الملحوظة التالية ثم يعود أو بإمكانه أن ينظر معى للمثال التالى لعله يكتشف أنها محرد طريقة 
لتمثيل عناصر (عقد) شجرة المستند بشكل مستقل عن النظام : 

4E Êz (‏ ( ناو 81" ) 6 
1١‏ ری لافطال کے کے ا ال ٠‏ 3 6511518 ر “51331 | 
J)‏ 
و كما تتوقع فإن الأسطر أعلاه تقوم بإسناد القيمة النصية الفارغة ٠١‏ لخاصية ©72111 الخاصة 
بجميع مربعات النصوص فى الصفحة و تقوم باسناد القيمة ' يرجى إدخال قيمة فى هذا 
الحقل “ للخاصية 1غ ذع الخاصة بجميع مربعات النصوص فى الصفحة . 


5 


و الآن أصبحنا نعرف كيف نقوم "بالقراءة من" و "الكتابة إلى" واصفات العناصر و يبقى أن 
نعرف أنه يمكننا حذف الواصفات أيضاً باستخدام الدالة t٤‏ emoveAtع‏ التى لها الشكل 
التالى : 


5 


57 11017 كيت ست 6د‎ EE AEE MOU 5 “1ق‎ J 


حيث أن 112©113:0©6ط288231 يمثّل اسم الواصفة التي نريد حذفها و كمثال على 
استخدام الدالة 662 هع2©1007 قد نكتب مايلى: 


# 3187و تمع "دع 662 1ق هد (A‏ 
لحذف الواصفة +20©1 83 من جميع الروابط فى المستند . 


ملحوظة : 35011 هي اختصار ل 210832116012 Script Object‏ 3373 أي ترميز 
كائن جافا سكربت و هذا الترميز بسيط جداً جداً على عكس اسمه المخيف إذ أنه يقوم بتمثيل 
خصائص الكائن بشكل أزواج (مفتاح / قيمة) على الشكل التالي : 


Keyı : ‘value,’ , 


Key»: 'value»’ , 
5 
Key, : ‘value,’ 


} 


حيث أن المفتاح (الخاصية) 1لاعع1 يحمل القيمة :عن 1ه و المفتاح دوه يحمل القيمة 


12 و المفتاح ,ع يحمل القيمة مرع73111 و هكذا . 


دوا] التعاما مج الأنماط Styles‏ : 
تؤمن لنا مكتبة 2177 ©3911 القدرة على التعامل مع أنماط ( ستايلات) كائنات الصفحة عن 
طريق مجموعة من الدوال » حيث تسمح لنا بإضافة نمط جديد (01355© 055 جديد) 
للعناصر عن طريق الدالة 30001355 التى تستعمل كمايلى: 

زر “258115205 1ه 5610161288107 EOE‏ 836166 57 


حيث تقوم هذه الدالة بإضافة النمط 013551213106 المعرّف ضمن ورقة الأنماط الخاصة 
بالصفحة إلى مجموعة العناصر التي يعيدها المحدد 0+ ©5616 و هنا من الضروري أن 
نتذكر أن أي عنصر في المستند يستطيع أن ينتمي لأكثر من صف في ورقة الأنماط شرط أن 
نفصل بين أسماء الصفوف بمحرف المسافة ©©553 و لذا لا نستغرب عندما نرى شيئاً مماثلاً 
لما يلي : 


م > EON 6112585712353: CLES CLASS, CLASS < CLASS.‏ 
و لا نستغرب عندما يتم تطبيق كافة خصائص الصفوف المذكورة على العنصر 5231 و هذا 
سبب تسمية الدالة التى نناقشها ب 20001355 لأن عملها الفعلى هو إضافة نمط جديد إلى 

العناصر التى يعيدها المحدد بشكل إضافى للأنماط الموجودة أصلاً. 


النقيض تماماً تسمح لنا مكتبة 287 ©3011 بحذف أحد صفوف الأنماط التى ينتمى لها 
تسمح بة لآ صفو ي ينتمي 
كائن معين عن طريق الدالة 08 التى تستخدم بالشكل : 


$ (' selector’ ( .removeClass )* className’ ) ; 
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و من الطبيعي أن تقوم هذه الدالة بإيقاف تطبيق خصائص النمط 21355213706 على 
مجموعة العناصر التي يعيدها المحدد 56166802 . 

من الدوال الجميلة جداً التي تؤمنها المكتبة رهاز أيضاً هبي دالة القلب 
5 يها التي تقوم بإضافة أحد صفوف النمط إلى العناصر التي لا تنتمي إليه من 
المجموعة التي يعيدها المحدد و تقوم بنفس الوقت بإيقاف تطبيق ذات الصف على العناصر 
التي تنتمي إليه من المجموعة التي يعيدها المحدد و لهذه الدالة الشكل التالي : 


وز 7قهتنت!1 612858 “)1-3885 36 1رورو© ١5‏ “861665632 57 
وقد يبدو عمل هذه الدالة مستهجناً فى الوهلة الأولى و لكن إن نظرنا إلى المثال التالى 
سنرى الفائدة الكبيرة التى تقدمها هذه الدالة , لنفترض جدلاً أننا قمنا بكتابة الصفحة التالية: 

<html> 
<head> 


<1 1†/>قبل اختبار دالة القلب 1٥<‏ 11> 


SEVE EVE = EEX ECS 
ALEC 


background-color:black; 


CO LOE AT EE 


} 


</style> 


</head> 


<body> 


ee eee e 
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<table 10-7322161 ”< 


E 


>10< ا />اسم المنتج‎ d< 


< لا />سعر المبيع <10> 
GEEZ‏ 
SEE‏ 


>1 d<1 منتج‎ >/ d< 


< كا />سعر OZAL‏ 


۸ 


EE 
€ EI 


<0/>منتج 0<2> 


۸ 


td>2 لكا />سعر‎ < 
GEES 
E 


<0/>منتج 0<3> 


۸ 


<0/>سعر 60<3 


EE 
- EI 


<0/>منتج 0<4> 


3 1100ة1ة1ة1ة1االلللاْلللر222؟26 ب 003 
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>10<4 <0/>سعر‎ 
EES 
</table> 
</body> 


</html> 


و هي صفحة بسيطة جداً تحتوي جدولاً لأسماء و أسعار منتجات وهمية و نتيجة عرضها على 


الشاشة تشه ما يلى : 


بعد فترة و أثناء تجولنا على الشبكة العالمية +22861217261 رأينا أن معظم مواقع ال ام۷ 
الجيدة تقوم بعرض أسطر الجداول بلونين متناوبين و هو ما يعرف بالإنجليزية ب( 26522 


126 © بالشكل : 
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فتحمسنا لحعل جدولنا يبدو كبقية الحداول الحيدة في عالم ال ط٥‏ و قمنا بتعديل شيفرة 


الحدول فى صفحتنا لتصبح كمايلى : 


Ea le iOS 1ت 1 قمع‎ 


GEEZ 


<0/>اسم المنتج <لا 


<0/>سعر المبيع <ل ا 


< 


EES 


SE 11-218 SSE DL AE 


td>1 <0/>منتج‎ 


< كا />سعر LO‏ 


EEE 


GSE 


d<2 <0/>منتج‎ 


<10/>سعر 1 
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اه 


GEE لت‎ 25 5 ISE ACK > 


td<3 <0/>منتج‎ 


td<3 <0/>سعر‎ 
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22 
GEEZ 


<0/>منتج 0<4> 


۸ 


< لا />سعر td>4‏ 
حرج > 
</table>‏ 


و بعد نجاح تعديلنا بفترة لنفترض أننا أردنا تغيير رتيب تناوب اللونين لسبب ما لنجعل شكل 
الجدول كما يلي : 


^ ت ^ 
١‏ حر 3-3 ملح 3 


ملت 4 
قد نخطئ هنا ذات الخطأ السابق و نعود لتعديل شيفرة الجدول في حين أن كتابة السطر 
التالى من أسطر المكتبة 07 ©3011 ستحل المشكلة : 

7 16615/75126167 زوروه ع.ر FEASLE1 EE’‏ 57 
وهنا لا بد من الاعتراف أن السطر التالى كان سيجعل الحياة أسهل فى الحالة السابقة عندما 
أردنا تلوين بعض سطور الجدول : 


57 مره‎ 11 tEEreven’ هر‎ 61616 1238)/7 516157 J? 
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إلى الآن تعاملنا مع أنماط العناصر عبر الصفوف 0135565 و لكن ماذا لو أردنا أن نقوم 
بالتعامل مع كل خاصية من خصائص أنماط العنصر بشكل مباشر دون الحاجة لصف ؟ 


توفر المكتبة ذلك أيضاً عبر الدالة 055 التى تسمح لنا بقراءة قيمة خاصية نمط العنصر بشكل 
مباشر عبر الصيغة التالية: 


(i LO ا‎ RAME JF 


حيث ستقوم الدالة بإعادة قيمة الخاصية ©2310 من خصائص أنماط العنصر الذي يحمل 
المعرف 30 » أما لإسناد قيمة خاصية نمط لعنصر معين يمكن استعمال الصيغة : 
و( YALE“‏ “ر ARAMO’‏ “)وه (Ld‏ 


التي ستقوم بإسنان القيمة ©72111 إلى الخاصية ©2310 من خصائص أنماط العنصر الذي 
يحمل المعرف لذ , و كما قلنا سابقاً عند مناقشة الدالة غ26 فإننا نستطيع عمل دوران 
عه "للقراءة من" أو "للكتابة إلى" أكثر من عنصر أو يمكننا الاستغناء عن دوران ع2 
باستعمال الصيغة المختصرة : 


5(7 Fid’).css(JSON); 


حيث يتم تمرير أزواج (مفتاح / قيمة) في كائن 71 تعبر عن مجموعة من خصائص أنماط 
العنصر ليتم إسنادها دفعة واحدة للعناصر التى يعيدها المحدد 0+ 56166 . 


هناك دوال أخرى للتعامل مع ما يعتبر من خصائص أنماط العنصر مثل الدالة غل« التي 
تسمح بقراءة عرض العنصر بالشكل : 


5) #id’).width(0; 


أو إسناد عرض العنصر بالشكل : 
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5)' #id’).width(value); 
: و مثلها الدالة خو ذه" التي تسمح بقراءة ارتفاع العنصر بالشكل‎ 
')ة5‎ #id’).height(0; 
: أو إسناد ارتفاعه بالشكل‎ 


5(' #id’).height(value); 


دوال التعامل مع محتوى عناصر المستند Inner content‏ : 
تعطينا المكتبة 327 ©3011 إمكانيات أخرى للتعامل مع مستند ال ا و هذه المرة تسمح لا 
بالتعامل مع محتوى العناصر عبر مجموعة من الدوال منها دالة 1٤۳1‏ التى تقوم بقراءة 
ا اه 

حيث أنها تعيد شيفرة ال ء111۷1 التى تمثل المحتوى الموجود داخل العنصر ذو المعرف 10 
و تقوم بإسناد قيمة جديدة للمحتوى(استبداله) بالشكل : 

o aL (COM) 8‏ ) “1161 7 5 
حيث أن الوسيط 0012© هو شيفرة ال ۸1۷1 التى تمثل المحتوى الجديد. 
أما الدالة +836 فهى مماثلة للدالة السابقة عدا أنها تتعامل مع المحتوى كنص عادي و ليس 
كشيفرة ء111 و لها الشكل التالى فى حالة القراءة : 


HLA EO E 
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و الشكل التالي في حالة الإسناد: 
EEX ECO)‏ 11617 57 
حيث أن الوسيط 001 هو نص عادي يمثل المحتوى الجديد. 
و في سبيل المقارنة بين الدالة 26301 و الدالة مدع لو کان لدينا في صفحتنا ما بلي مثلاً : 
<ul id=”myul”>‏ 


ESS ES 


€LLSAVLLS 
</ul> 
: ثم قمنا باستدعاء الدالة +862 كما يلي‎ 
$ ('#myul’ ) .text (); 
أما في حالة استدعاء الدالة 1۳1 بنفس الصيغة‎ )S 1غ‎ ٣9( فإنها ستعيد القيمة 12 كنص‎ 
: فإنها ستعيد المحتوى‎ 
CLL SILLS 
GLAS LLY 
لا يقتصر الموضوع على الاستبدال الكلي لمحتوى وسوم المستند و إنما يمكن تعديل جزء من‎ 


محتوى المستند و لعل الدالة append‏ خير ما نستهل به حديثنا عن هذه النقطة فهى تقوم 
بإضافة محتوى ,281111 حديد إلى نهاية العناصر المحددة و تستعمل بالشكل : 


81117 فهو ممم “561565616 57 
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و كنا قد رأينا مثالاً على عملها هذا في فقرة سابقة حيث استخدمناها لتوليد محتوى جديد و 
إضافته للصفحة و لا داعي لإعادة الكلام هنا و لكن ما أريد قوله في هذه الفقرة أن لهذه الدالة 
عملاً آخراً هاماً جداً يمكننا من نقل أو نسخ مجموعة من عناصر المستند من مكانها ضمن 
المستند إلى مكان آخر ضمنه فمثلاً يمكن أن نكتب مايلي : 


57 5 32673155 81-56 EOE AOE? (7 SOUETCEIOLECEOE ¢ 


و هنا تلاحظ أننا قمنا بتمرير محموعة من العناصر للدالة عن طريق استدعاء محدد 
501120656160 و لم نقم بتمریر محتوى ۸1۷1 بشكل مباشر كما فعلنا في المثال 
الذي ناقشناه سابقاً و في هذه الحالة ستقوم هذه التعليمة بأخذ العناصر التي يعيدها المعرف 
هع 5011265616 و نقلها من مكانها الأصلي إلى المكان الهدف مما يعني حذفها من 
المكان الأصلي و إضافتها في المكان الهدف و هو آخر العنصر الذي يعيده المحدد 
320668561620 إن کان ما يعيده هو عنصراً واحدا أما إن كان أكثر من عنصر فإن 
الدالة ستقوم بعملية نسخ بدل النقل مما يعني أنها ستحافظ على المحتوى المصدر في مكانه و 
تضيف محتوى مماثل له تماماً آخر كل كائن يعيده المحتوى الهدف و كمثال على الموضوع 
تصور أن لدينا المحتوى التالي في المستند: 

E 


SIONS 


LL 1O LEELA ZI2 


GLI SAI SLL 


OL 


nene: 11130 


46 


فى مثل هذه الحالة فإن الاستدعاء : 

”601 )22520( ”801162012 ”)5 
سيقوم بحذف القائمة الثانية من موضعها الأصلى و إضافة واحدة جديدة مطابقة لها تماماً و 
جعلها جزءاً من القائمة الأولى تابعاً للعنصر الثانى فى نهايته فى حين أن الاستدعاء : 

وز لت “لمم SEL LL‏ 

سيقوم بنسخ القائمة الثانية دون أن يأثر عليها و ينشئ قائمة مطابقة لها تماماً يضيفها إلى نهاية 
كل عنصر من عناصر القائمة الأولى : 
تذكر : إذا كان المحدد الهدف يعيد أكثر من عنصر (مصفوفة من العناصر) فإن استدعاء الدالة 
6م23 يقوم بنسخ المصدر أما إن كان ما يعيده المحدد الهدف عنصراً واحداً فإن استدعاء 
الدالة يقوم بنقل المصدر . 
هناك دالة مشابهة بالاسم فقط للدالة 3226120 اسمها 3226172016 تستدعى بالشكل 
التالى: 


57“ SOUECE aoe TEGO E 


حيث تقوم هذه الدالة بنقل العناصر التى يعيدها المحدد هءإناهء و إضافتها إلى آخر 
العنصر الذي يعيده المحدد 222964 إن كان يعيد عنصراً واحداً و إن كان يعيد أكثر من 
عنصر فإنها تقوم بنسخ هذه العناصر و ليس نقلها و على سبيل المثال فإن التعليمة : 


571 “ممم همهم 11-7 15ت سا ع هارو زو روات‎ COGS 
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تقوم بنقل العنصر ذو المعرف 0213721911:32©1» إلى العنصر الذي ينتمى لصف النمط 
code‏ فى حال کان وحيداً و إن كان هناك أكثر من عنصر ينتمى للصف ©00ح فى الصفحة 
سيتم نسخ العنصر ذو المعرف 0111:3©1 0023723 و لیس نقله . 


ملحوظة : لو انتبهت لطريقة عمل الدالة 322620 من حيث البارمترات و قارنتها بالدالة 


2070 هممة لوجدت أنهما متعاكستان من ناحية كون أي البارمترات مصدرا و أيها هدفاً . 


على عكس الدالتين append‏ و append1o‏ اللتين تقومان بإضافة المحتوى في نهاية 
المحتوى الداخلي للعناصر المحددة (قبل وسم الإغلاق الخاص بكل منها) فإن الدالتين 
240 2222 و d10‏ enمreام‏ تعملان بنفس الطريقة تمان عدا أنهما تضيفان المحتوى 
الجديد في بداية المحتوى الداخلي للعناصر المحددة (بعد وسم البدء لكل منها) حيث تعمل 
240 بنفس طريقة 322©110 و تعمل 2©672©1101'65م بنفس طريقة 3226122010 . 


أما بالنسة للدالتين () ©20*»ط و () fore‏ 31256286 فإنهما تعملان بأسلوب مشابه 
أيضاً مع ملاحظة أن الدوال السابقة تضيف المحتوى في بداية أو نهاية المحتوى الداخلي 
للهدف (بعد وسم البدء أو قبل وسم الإغلاق) في حين أن هاتين الدالتين تقومان بإضافة 
المحتوى قبل الهدف تماماً (قبل وسم البدء الخاص به) . 

و بالمثل توفر المكتبة دالتين تعملان بنفس الأسلوب مع اختلاف بسيط إذ أنهما تضيفان 
المحتوى بعد الهدف تماماً (بعد وسم الإغلاق الخاص به) و هما ()2©+*22 و 
.insertAfter ()‏ 
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و لأن الدوال الحديدة التى قرأتها قبل قليل تعمل بطريقة مشابهة للدالة ۵٣٤م‏ مھ سأكتفى 
بذكر مثال واحد مختصر فقط على كل منها . 


تقوم التعليمة التالية : 
“ع كلت 81712 SO AME 15312 12317 SOL lOve‏ 


بإضافة الحملة 5317213 10٥7e‏ 1 قبل كل عنصر يعيده المحدد 1100 عط »و تقوم التعليمة 
التالية بنفس المهمة : 


SOL 1673 SvEla Is 11281536 615515125) O ME 7‏ 
ينما تقوم التعليمة التالية : 
SMELL Style =5 “EOlOR EOS‏ “)مدقن ERE EO Tl pal‏ انق عتهاراق )5 
Ext EMAL VEAL 7‏ 
بإضافة الكلمة ×٥٤ ٣۸۵1‏ بعد كل رابط يشير إلى موقع خارجي ٠‏ و تقوم التعليمة التالية 
بالوظيفة ذاتها : 
ه5615 2ق "121261 1ه 6171-6-7 8 <SMal1L‏ 5 


</smal1>’).insertAfter(’ a[href^=http : / /177.['(: 


كل دالة من الدوال الجميلة السابقة لها عمل معين قد يشابه غيرها و لكن اختلاف الأسلوب 
يجعل كلاً منها ملائمة تماماً لحالات معينة و الحدول التالى يساعد على تلخيص عملها : 


| الوظيفة 


فى حال استدعائها بدون تمرير أي وسيط 62 23223106 


append() 


appendTo() 


prepend( 


prependTo() 


before() 


تقوم الدالة بإعادة محتوى العناصر المحددة على شكل شيفرة 
81141 » و في حال تمرير وسيط مناسب لها تستبدل المحتوى 
السابق للعناصر المحددة به . 


تشه بعملها عمل 28101 مع فرق أن ما تأخذه كوسيط فى 
حال تمرير وسيط لها و ما تعيده في حال عدم تمرير وسيط لها 
هو نص 5211260 . 


تضيف محتوى الوسيط الممرر لها إلى نهاية المحتوى 
الداخلى لكل من العناصر التى يعيدها المحدد كما تستعمل 
في حال الرغبة في نقل / نسخ مجموعة من عناصر المستند من 
مكان ضمن المستند إلى مكان آخر ضمنه . 


تضيف المحتوى الذي تطبق عليه إلى نهاية المحتوى 


الداخلى لكل من العناصر التى يعيدها وسيطها الذي يكون 


محددا . 


تضيف محتوى الوسيط الممرر لها إلى بداية المحتوى 
الداخلى لكل من العناصر التى يعيدها المحدد . 

تضيف المحتوى الذي تطبق عليه إلى بداية المحتوى 
الداخلى لكل من العناصر التى يعيدها وسيطها الذي يكون 


محددا . 


تضيف محتوى الوسيط الممرر لها قبل كل عنصر من العناصر 
التى يعيدها المحدد. 


insertBefore()‏ تضيف المحتوى الذي تطبق عليه قبل كل عنصر من العناصر 
التى يعيدها وسيطها الذي يكون محددا . 


after()‏ تضيف محتوى الوسيط الممرر لها بعد كل عنصر من العناصر 
التى يعيدها المحدد. 


insertAfter()‏ تضيف المحتوى الذي تطبق عليه بعد كل عنصر من العناصر 
التى يعيدها وسيطها الذي يكون محددا . 


أحياناً نحتاج للقيام بتغليف محتوى ما بوسم معيّن أو مجموعة من الوسوم فمثلاً لنفترض أننا 
نريد تغليف جميع وسوم 109 بالوسم 2 مثلاً (جعل وسوم 1109 محتويات لوسوم 2 جديدة) 
أو نريد تغليف جميع العناصر 2 ص بالوسم 41 › يمكنك أن تنظر إلى الشكل التالي لتتضح 
الصورة : 


<img src=" pic.gif" 
/< 


aap <a href="#"><img src="pic.gif" /></a>‏ وله 


<a href="#"></a> 
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تؤمن لنا مكتبة 3217 ©3011 هذه الإمكانية عبر مجموعة من الدوال فالدالة ص22 تقوم 
بتغليف كل عنصر من مجموعة العناصر التي تطبق عليها بالغلاف الممرر لها كوسيط 
parame ter‏ و لهذه الدالة الشكل التالى : 


57 381156 5616 iE “قرت‎ WEE OEE عر‎ 


حيث تقوم بتغليف كل من العناصر المحددة بالمحدد 801+ ©5916 بالغلاف Wrapper‏ و 
لو أردنا تحويل الشكل التوضيحي السابق إلى شيفرة 3217 ©3011 لكتبنا مثلاً : 


57 AME EAA “ >21 AEE SNES 


و بالفعل فإن الدالة السابقة تقوم بتغليف كل عنصر صورة بالمستند بعنصر الرابط الممرر لها 
بمعنى أن يصح هناك غلاف لكل عنصر من المحموعة المحددة و لو أردنا تغليف حميع 
العناصر المحددة بغلاف واحد فقط لأتى دور الدالة 225211 التي تلبي رغبتنا تماماً و لها 
الشكل : 


57 561166 EOE “مظعت مسر‎ WEISEL 7 


: و المثال التالي يوضّح عمل الدالة الأولى م882‎ 
<html> 
<head> 
SEEN OE SEG LN GUO EY SN EE ECE OVA SON OIE 
> وزع 6ق‎ 82 
<script type="text/javascript"> 
$ (document) . ready (function () { 


$ ('img [src] ') .wrap ('<a href="#"></a>'); 
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)م 
</script>‏ 
</head>‏ 
<body>‏ 
PIE 72‏ ا ل GALE"‏ اك GIME] SEE‏ 
</body>‏ 
</html>‏ 


إذ أله عند استعراض هذه الصفحة سيتم تغليف الصورة بالرّابط و هذا تحقيق فعلى للشكل 


التوضيحى الذي عرض فى بداية الفقرة . 


في حالات أخرى قد نحتاج إلى تغليف محتوى مجموعة من العناصر بدلا من تغليفها نفسها و 


- 


مومه اک 


هذا ما تقدمه الدالة 17237111112 التى تستخدم بالشكل : 


57 SELECGEOE FUE SOIREE WEEE E عر‎ 


ملحوظة : يمكن الاستفادة من دوال التغليف لنسخ العناصر من مكان إلى آخر ضمن المستند و 
ذلك عن طريق جعل الغلاف الحديد عنصراً من العناصر الموجودة أصلاً فى المستند . 
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دوال حذف عناصر المستند : 
توفر مكتبة 217 ©3011 دوالا أخرى خاصة بحذف عناصر المستند فالدالة ۲٥٣٥ع‏ التى 
تستعمل بالشكل التالى : 

selector’ ( .remove )( ;‏ ') $ 
تقوم بحذف جميع العناصر التى يعيدها المحدد إ 5916 » أما فى حال الرغبة بحذف 
المحتوى الداخلى 0601218©6121©© 1222632 الخاص بهذه العناصر فقط و الإبقاء عليها فيمكن 
استعمال الدالة 1021© التى لها الشكل : 


م () مق ومست ) SELECEOE‏ 57 


ملحوظة : هناك طريقة أخرى لنسخ عناصر المستند تؤْمّنها الدّالة 10۸6ء التى تُستعمل غالا 
مع دوال ©202ع و after‏ و append‏ بصيغة تشبه المثال التالى الذي يقوم بنسخ 
عنصر ذل من المستند و يضيفها إلى نهاية اذل آخر 


$ ('#sourceDiv’ ( .clone )( .appendTo ) '#targetDiv’ ( : 


دوا التعاما لاس عناص الدما FORM ELEMENTS ù‏ : 


تعتبر النماذج 8612105 من أهم العناصر في صفحات ال ط۴6 لما لها من قيمة في تفاعل 
المستخدم مع تطبيق ال »18 الخاص بك و لكن هذه الأهمية تأتي على حساب صعوبة في 
التعامل معها برمجياً من طرف العميل و يتجلى ذلك بوضوح من خلال عدة سيناريوهات و لعل 
هذا ما دفع الهيئة العالمية #3٥‏ لدعوة مبرمجي 5021714 373 إلى الحذر أثناء التعامل 
معها و لهذا و ذاك تؤمن مكتبة 2177 ©3011 مجموعة خاصة من الدّوال للتعامل مع عناصر 
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النماذج و تفادي أغلب المشاكل الشائعة بأسهل الطرق و هنا نستهل حديثنا عن هذه الدّوال 
بالحديث عن الدالة 721 التى تستخدم لقراءة القيم من عناصر النماذج و لها الشكل التالى : 
ol )(‏ ( ا 505616 
تعيد هذه الدالة قيمة وحيدة فى حال كان المحدد 52166602 یعید عنصراً وحيداً هى 
قيمة ذلك العنصر » أمّا فى حال كون المحدّد 0+ 5216 يعيد أكثر من عنصر فإن الدالة 
1 تعيد قيمة أول عنصر من هذه العناصر . 
ملحوظة : يقصد بقيمة العنصر هنا القيمة التى تعرفها الواصفة ©73111 لذلك العنصر و من 
الجدير بالذكر هنا أن الدّالة 7721 فى حالة استدعائها على عنصر تحديد يسمح باختيار أكثر 


E 


من خيار فى وقت واحد Mul ti-select element‏ فإن الدالة 21 تعيد مصفوفة 


تمثل الخيارات المنتقاة من قبل المستخدم . 


و كمثال على استعمالها فإن كتابة سطر كالتالى : 
OYE‏ ا 6 ا 1 SUT‏ 


يعيد قيمة الواصفة 73111 للعنصر ذو المعرف 113106 2125 . 


على الرغم من أن الدالّة 721 تحل الكثير من مشاكل التعامل مع العناصر إلا أنه يجب تذكر 
نقطتين هامتين عند التعامل معها : النقطة الأولى أنه إن كان أول عنصر من المجموعة التي 
يعيدها المحدد إ 5٠1٠٤٤٥‏ ليس عنصر نموذج فإن خطاً برمجياً سيظهر في مستند ال ا۷ 
» النقطة الثانية هي أن الدالة 7321 تعيد قيمة الواصفة ©73111 لعناصر صناديق الاختيار 
check box‏ و button‏ 23016 بغض النظر عن کون هذه العناصر في حالة 
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1ع أو لا ولكنّ حلاً لهذه المشكلة يتوفر سهولة بعد مراجعة جدول المحدّدات و 
كتابة شيء شبيه بما يلي : 


017 ةك ESC ١‏ 561166166139251 دش ستمص || “) 5 


للدّالة 721 استخدام آخر غير قراءة القيم من عناصر النماذج و هو كما تتوقع إسناد القيم لها و 
للقيام بهذه العملية نستعمل الشكل : 


$ (' selector’ ( .val (value) م‎ 


كما تستخدم الدالة 731 للقيام بتغيير حالة عناصر radio buttons‏ و check‏ 
5 و عناصر <561©©18> إلى حالة التحديد 18©0 ©5616 و ذلك عبر الصيغة : 


“16ت 7 الم 2 S{(SeleCLOr‏ 


5 


حيث تقوم الدالة بالبحث ضمن العناصر التى يعيدها المحدد ه80 ©5616 عن العناصر التى 
616064 .؛ فالحملة التالية مثلاً : 

Makale J) 2‏ , “613612577 3 ”, “ المسمع اوقلت 7[ ( val‏ “نادمه 5 
تجعل الحالة 561628640 حالة لجميع عناصر النماذج التى تحمل واصفة ©72111 الخاصّة 
بها إحدى القيم 30131121 أو 27 ©0911 أو 241115633 و المثال التالى يوضّح هذا 
الاستخدام: 


INEM 
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<head> 
<script src=" jquery.js" type="text/javascript"> 
</script> 
<script type="text/jJavascript"> 
$ (document) . ready (function () { 
$('*') .val (['abokamal', 'jQuery']); 
)م‎ 
</script> 
</head> 
<body> 
<select id="Select1"> 


<option value="X">Abokamal</option> 


<option value="jQuery">jJQuery</option> 


<option>Mukhtar</option> 
</select> 
</body> 


CAMELS 


ملحوظة : قد يكون هناك بعض السيناريوهات التي لا تلبي فيها الدالة 7721 جميع متطلباتك و 
حينها يمكنك تجربة استعمال الإضافة 211161172 ذات الاسم 5211106112 020 و التى 
سنمرٌ عليها فى الدقائق الخاصة بالإضافات . 
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من الدقيقة 57 إلى الدقيقة 75 : 
- - 
الاحدات 


Events 


: Events الأحداث‎ 


قبل أن نناقش استثمار 37 ©3013 لتسهيل التعامل معها علينا أن نعرف شيئاً بسيطاً عنها › ما هى 


الأحداث ؟ 


حسناً .. تمتلك كلمة حدث +8765 المعنى نفسه في مختلف تقنيات البرمجة سواءً أكنا 
نبرمج تطبيقاً لسطح المكتب أو تطبيقاً لل 18 أو تطبيقاً للهواتف الذكية أو لغيرها و كالمعنى 
اللغوي لاسمه يقصد بالحدث حدوث أمر ما أو تغيير معيّن يشعر به التطبيق و يستجيب له أحياناً 
-و هذا هو الغالب- أو يتجاهله في أحيان أخرى و هناك عدة أنواع من الأحداث منها ما 
يسببه نظام التشغيل مثل بدء تشغيل التطبيق أو إنهاء تشغيله أو مقاطعته بشكل معين و منها ما 
يسببه المستخدم و هذا ما يهمنا صراحة و من الأحداث التي يسببها المستخدم حدث النقر على 
زر معين في التطبيق ع1 011 أو حدث النقر المزدوج 111 ©1ناه2 أو حدث مرور 
الفأرة فوق منطقة ما من التطبيق "07٥‏ ©110115 ... إلخ. 


التطبيقات بطبيعتها لا تستجيب للأحداث و لكنها تشعر بحدوثها بمعنى أن تطبيقك يعرف تماماً 
أك قمت بالنقر على الزر الفلاني لحظة النقر كما يعرف تماماً أنك قمت بالكتابة في مربع 
النص لحظة الكتابة و لكنه بشكل افتراضي يتجاهل هذه الأحداث و لا يستجيب لها إلا إن 
أجيره المبرمج على ذلك بشكل صريح عن طريق ما يعرف بالتعامل مع الأحداث أو غځEven‏ 
220119 » و لأن هذا الكتاب يسعى لتسيط الأمور و يدعي ذلك فيكفي أن أقول على 
سبيل التبسيط أنه للتعامل مع حدث معين -و الكلام هنا عام و ليس في مجال ال ام۷ 
فحسب- يكفي أن تكتب دالة 2112430 تقوم بعملية معينة ثم تقوم بربط هذه الدالة 
بالحدث و عندها تصبح استحابة تطبيقك عندما يتم تفحير الحدث (عندما يقع الحدث) تنفيذ 
الدالة المرتبطة به. 
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في مجال ال ط١‏ المشكلة العظمى التي كانت تواجه المبرمجين و مطوري مواقع الانترنت 
هي مشكلة اختلاف المتصفحات 81201755615 حيث أن كل متصفح يمتلك طريقته الخاصة 
في التعامل مع تطبيقات ال ط٠ا‏ و عند الحديث عن الأحداث فالأمر يطول و يطول ليستطيع 
المطور منا كتابة شيفرة 567237216 33373 تعمل على جميع المتصفحات › مع 217 ©3011 
نلقي بكل هذه المشاكل خلف ظهورنا و نستعمل دوال المكتبة لكتابة شيفرات عصرية تعمل 
لدى الجميع بضمان كبرى شركات البرمجيات في العالم. 
في المعايير الموحدة ل :111141 و .76111341 هناك مجموعة من الأحداث التي لها استجابات 
افتراضية لا تتطلب منا كتابة أي شيفرة فمثلاً عند تفجير حدث النقر المفرد 1316© على رابط 
1.321 فإن المتصفح ينقلنا إلى الصفحة الجديدة دون أي تدخل منا لأن هذه الاستحابة 
موجودة ضمنياً و هذا هو الحال مع بعض الأحداث الأخرى و بالطبع يمكن تجاوز هذه 
الاستحابات الافتراضية عند الحاحة , أما بالنسبة للطريقة التقليديّة للتعامل مع الأحداث فإنَّها 
تقتضي أن نستعين بواصفات خاصة توضع مع الوسوم لربط حدث معيّن بدالة معينة » أغلب 
أسماء هذه الواصفات تبدأ بحرف الحر 2ه فمثلاً من أجل حدث النقر 1321© هناك واصفة 
اسمها 0221312-16 و من أجل حدث مرور الفأرة ©1105 ©20115 هناك واصفة اسمها 
nmousemoveه‏ و من أجل حدث الانتقال إلى عنصر 202115 هناك واصفة اسمها 
065 و هكذا .. و لعل المثال التالي يوضح الصّورة علماً أنه مكتوب بطريقة تقليدية 
دون الاعتماد على المكتبة الرائعة 217 ©3011 : 

<html> 

<head> 
<script type=/”text/Jjavascript”> 


function myClickHandler () { 


: ( ”تم النقر على الزر“) +2162 
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07 


function myMoveHandler )( 1‏ 
: ( ”تم مرور مؤشّر الفأرة فوق الصورة”) +212 
;} 
</script>‏ 
</head>‏ 

<body> 
€TAOUL LOS BUL EOL EOE OE COM “انقرني = ں21‎ 
onclick=“”myClickHandler () 7” /> 
<img src=“ myPic.gif” onmousemove=/myMoveHandler () ” /> 


</body> 


</html> 


الصفحة البسيطة تحتوي زرا و صورة و لو انتبهت لواصفات الزر لرأيت الواصفة 021316 و 
لو دققت في قيمتها قليلاً لوجدتها اسما لدالة من دوال +م5©23 332 الموجودة في 
المستند ألا وهي الدالة 010131513201 » كما أنك لو دققت في واصفات الصورة 
لرأيت الواصفة 023001156100576 التي تحتوي على اسم لدالة أخرى من دوال المستند و 
بنظرة بسيطة نعرف أن الدالة الأولى ستستدعى عند اللْقر على الزّر و الثانية ستستدعى عند مرور 


مؤشر الفأرة فوق الصورة و لك أن تجرب . 
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حسناً .. المثال السابق يعتبر أبسط أمثلة التعامل مع الأحداث على الإطلاق و يمكن اتباع 
طريقة المثال في التعامل مع الأحداث و استخدام أوامر 301127 ضمن جسم الدالة التي 
تُستدعى عند تفجير الحدث و لكن الطريقة الأفضل هي استخدام نموذج أحداث 7[ ©3011. 
تؤمن مكتبة 3237 ©3011 طريقة سهلة للتعامل مع الأحداث عبر مجموعة من الدوال منها 
الاحترافية التي سأناقشها بعد المجموعة الأخرى البسيطة التي تقابل كل دالة منها واصفة من 
الواصفات الخاصة بالأحداث لكن بعد الاستغناء عن حرف الجر 02 في الاسم » فمثلاً الدالة 
البسيطة التي تعين الدالة التي ستستجيب للحدث 0111© اسمها 1161© و ليس 
0826111 و أختها التي تعين الدالة التي ستستجيب لحدث مرور الفأرة اسمها 
©1077 2115 و ليس 61103776 011110115 و كمثال على استعمالها نستطيع إعادة كتابة 
الصفحة السابقة بالشكل : 
<html>‏ 
<head>‏ 

<script type=”text/ Javascript” src=” jquery.]Js”> 

</script> 

<script type=/”text/Jjavascript”> 


$ (document) . ready (function )( { 


$ ('#Button1l’ ( .click (function )( { 


: ("تم النقر على الزر" )٤16۶ھ‏ 
ا 


$ ) 'img’ ( .mousemove (function )( { 


: ("تم مرور المؤشر فوق الصورة' a1٠١٤)‏ 
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ا 
لا 


</script> 


</head> 
<body> 


LO BUCE CORAL EYO OU EO value= A 8‏ ع تساك 
SECS OELEGAL E $‏ زو 11د 
</body>‏ 


</html> 


عمل الصفحة أعلاه مطابق تماما لعمل الصفحة القديمة لكن باستخدام 237 ©3911 و من أوّل 
الفوائد الظاهرة هنا دون تفكير هي سهولة الكتابة مقارنة بالطريقة القديمة إضافة إلى زيادة 
تنظيم و ترتيب المستند و لو انتبهت إلى الوسوم الآن لرأيت أنه لم يعد هناك واصفات خاصة 
بالأحداث و بهذا تكون قد نجحت في فصل التصميم عن الشيفرة البرمجية الخاصة بالملف 
منطقياً كما يمكن وضع الشيفرة البرمجية كاملة في ملف منفصل و من ثم تضمينه ضمن الصفحة 
كما يفعل المبرمجون الجادون و بهذا يكون هنالك فصل فيزيائي حتى ! 

و بما أن شكل استدعاء دوال الأحداث السيطة في 37 ©0911 نفسه لجميع هذه الدوال فلا 
داعي لذكر كل واحدة منها بالتفصيل و نكتفي بذكر أسماء هذه الدوال و شرحها في الجداول 
التالية : 
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دوال الأحداث الخاصة بالنافذة (المستند ككل) : 


اسم دالة الحدث | لحظة تفجير الحدث 


load‏ عند تحميل المستند 
unload‏ عند اغلاق المست' 


دوال الأحداث الخاصة بعناصر النماذج : 


اسم دالة الحدث | لحظة تفجير الحدث 


عندما خسارة العنصر للتركيز ( ©1605 
5 ) هو معاکس تماما للحدث 206115 


change‏ ف عدوت تی على ال 
ا عند إرسال القيم إلى الخادم 


عند انتقال التركيز إلى العنصر (مثلاً فى حالة 
الانتقال بين مجموعة من حقول الإدخال فإن 


الحدث 206115 بقع على حقل الإدخال 


التالي بمجرد الانتقال إليه عن طريق مفتاح 
الحدولة ط" مثلاً) 


select‏ عند اختيار بند من محتويات العنصر ( نرى 


هذا الحدث فى مثل حالة العنصر 
(<select>‏ 


عند تحريك أشرطة التمرير (نرى هذا الحدث 


فى مثل حالة العنصر textarea‏ ( 


دوال الأحداث الخاصة بلوحة المفاتيح : 


اسم دالة الحدث | لحظة تفجير الحدث 


keydown‏ عند الضغط على مفتاح من لوحة مفاتيح 


keypress‏ بعد الضغط على مفتاح من لوحة المفاتيح و 


keyup‏ عند تحرير مفتاح من لوحة المفاتيح 


دوال الأحداث الخاصة بأزرار الفأرة : 


اسم دالة الحدث | لحظة تفجير الحدث 


click‏ عند النقر المغرد 
dbl1lclick‏ عند النقر المزدوج 
mousedown‏ عند الضغط على زر الفأرة 


mOusemove 
عند مرور مؤشر الفأرة‎ 


mouseout‏ عند خروج مؤشر الفأرة (يقصد بدخول مؤشر 


الفأرة أول مرور له فوق العنصر و يقصد 
بالخروج لحظة ابتعاده عنه) 


oN عه‎ 5 . mouseover 
عند دخول مؤشر الفارة‎ 


0002 عند تحرير زر الفأرة (انتهاء الضغط) 


دوال الأحداث الأخرى : 


اسم دالة الحدث | لحظة تفجير الحدث 


2202 عند حدوث خطا 


> عند تغیب ۱ل‎ reSsSlze 


| تن کر : حميع الدوال المذكورة ف الحداول أعلاه لها الشكل العام التالى 
61 2 2 ون م و SU BELECEOR‏ 
حيث تقوم بتعيين الدالة 21111211012 استحابة للحدث 7726© لجميع العناصر التى 


يعيدها المحدد مع 616 5 . 


و الآن و بعد أن رأينا سهولة دوال الأحداث البسيطة ما رأيك في أن نرى مرونة الدوال 
الأخرى الخاصة بالأحداث ؟ 

حسناً .. تقوم الدالة 320ط بتحديد دالة معينة كاستجابة لحدث محدد و لها الشكل العام 
التالى : 


ETON, 12‏ ا ا ا ات SM‏ 
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حيث أن الوسيط ٤١٠۷ء٠‏ هو اسم الحدث و عادة ما يكون واحداً من الأحداث ذاتها 
المذكورة فى الحداول السابقة » أما الوسيط 2112322832012 فهو اسم الدالة التى ستنفذ عند 
تفجير الحدث و إن تعليمتى 30116217 التاليتين تقومان بنفس العمل تماما : 

E LOM) 8‏ 12ت اروس ) علا 26 اله J‏ ”انه 7 5 


م ك6 6هننا هه ; (ELLER‏ 61قاد هل( “روسسنة" )5 


و من الجدير بالذكر أن عمل 120 أكثر من مرة على نفس العنصر يؤدي إلى تنفيذ جميع 
الدوال التى تربطها بالعنصر عند تفجير الحدث و هذا ممكن أيضاً باستخدام الدوال السيطة 
لذا فإن التعليمة التالية : 


(STNG J مدقا‎ (ELLER EL) sOLACON “عات كارع"‎ E2) 6ه‎ SELLE kK E 
3 


تقوم باستدعاء الدوال ۴1 و ۴2 و ۳3 بالترتيب عند تفجير حدث النقر الخاص بعناصر الصور 
فى المستند ؛ و إن التعليمة التالية تقوم بالمثل أيضاً : 


لماه (F2J‏ كات 1 لل هاه (EL)‏ 1612 لل ماه SIME J‏ اذ 


و على النقيض تماماً من عمل الدالة ك١‏ ذط تقوم الدالة 1131240 بإلغاء ربط أحد الدوال 
بحدث معين و لها نفس الشكل الخاص ب ٣۵‏ ةط تماما لذا فإن التعليمتين التاليتين : 


RUACZ )‏ ء 16167 ار" ) اممسدقاء ‏ 11 مويو" ع SELLER“‏ ) امهل J‏ “سد )5 
ات | فعا للك OLMA‏ 


5 (SIME) sUMOLAC ) قيمع 18617 ارمع"‎ 8 
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ستقومان باستدعاء الدالتين 8112123 و 8321 عند تفجير حدث النّقر الخاص بعناصر الصور 
في المستند دون تطبيق استدعاء الدالة 8322 لأن الدالة 1152531220 قامت بإلغاء ربطها 
بالحدث . 

كما توفر مكتبة 32217 ©7011 دالة خاصة مشابهة للدالة 317220 اسمها الدالة ©0252 الفرق الوحيد 
بينها و بين الدالة 2320 أن الأخيرة تستدعي مجموعة من الدوال عند تفجير حدث واحد 
فقط بينما تستطيع الدالة ©02 أن تستدعي مجموعة من الدوال عند تفجير مجموعة من 
الأحداث و لذا فإن التعليمة التالية : 


6105113867 م 616515 5ه , 056121616 ممه S(T IME J‏ 
8 “لقا لان MM‏ 


تقوم باستدعاء الدالة 103781121616012 عند تفجير أي من الأحداث د1ء أو 
mousemove‏ أو ع1 113 طك ! 
و الآن بعد أن فهمنا نموذج الأحداث الخاص بالمكتبة 327 ©3011 يجب أن نذكر أن جميع 
دوال الأحداث يمكن أن تزوّد بوسيط اختياري يُنْشَأْ تلقائياً بواسطة المكتبة » يحمل هذا 
الوسيط معلومات هامّةَ تخص الحدث و يسمّى "الكائن "٠٠٣٤‏ أو "الكائن ©" اختصاراً » و 
لإنشائه نستعمل نفس الصيغة الخاصة بدوال الأحداث لكن مع تمرير وسيط إضافي يمثل 
الوسيط © و كمثال على ذلك يمكن أن نكتب : 
(EUAC E LOR (E) 1‏ 16 16 ال هن (EA)‏ 5 
ا ا 
)م 
لا يختلف عمل الأسطر أعلاه عن عملها بدون تمرير الوسيط © أبداً فهي تقوم بعرض الرسالة 
"مرحباً" عند النقر على أي رابط في الصفحة و لكن ما يميزها أن وسيطها © يحمل قيماً خاصة 
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تمثل معلومات عن الحدث ٤1ء‏ يمكن الاستفادة منها فى جسم الدالة فمثلاً يمكن أن 
نكد نكتب : 


SCA VCORE TOR ا‎ 
alert (e.type) ; 


9E 


و سيكون نتيجة النقر على الروابط هذه المرة هو عرض رسالة تحتوي على الكلمة 1131© و 


وه مو مه چو 


هى هنا قيمة التعبير ©2875 ٠.‏ (فى الحقيقة قيمة الخاصية ©2875 الخاصة بالكائن 6). 


ملحوظة : قد لا يبدو الأمر ذا أهمية فى البداية لكن لو درست التعقيدات الخاصة بهذا الكائن 
في غ+م5623 3373( و اختلاف طرق التعامل معه باختلاف المتصفح لعرفت العمل الكبير 
الذي قام به فريق تطوير المكتبة 117 ©9011[ . 


لا يفوتنا أن نذكر هنا أنه على الرغم من أن الصيغة ذاتها تستخدم لتعريف الكائن © في جميع 
دوال الأحداث إلا أن خاصيات الكائن © تختلف من حدث إلى آخر و هذا طبيعي إذ أن 
المعلومات المتعلقة بحدث معيّن قد لا تعني شيئاً بالنسبة لحدث آخر و كمرجع سريع نلخص 
أهم خاصيات الكائن © في هذا الجدول : 


تحتوي القيمة ©3<11+ فى حال كون المفتاح +21 مضغوطاً لحظة 
تفحير الحدث و تحتوي ©2315 فى الحالة المعاكسة 


تحتوي القيمة مااع فى حال كون المفتاح 321+ح مضغوطاً 


لحظة تفجير الحدث و تحتوي ©2315 فى الحالة المعاكسة 


keyCode 


screenkX 


screenY 


relatedTarget 


shiftKey 


تتعلق بالحدثين تاياعع1 و down‏ رع و تعيد هذه الخاصية 
قيمة ال 25011 الخاص بالمفتاح المضغوط (و فى حال الضغط 
على حرف ما فإنها تعيد قيمة الحرف الكبير-كابيتال لتر- أو 
upper case‏ فمثلاً هذه الخاصية ستحتوي القيمة 65 فى 
حالة ضغط المفتاح 3 أو ضغط المفتاح 2) 

تتعلق بأحداث الفأرة و تعيد الإحداثيات الأفقية × الخاصة بمؤشر 
الفأرة بالنسبة للصفحة (بعد مؤشر الفأرة عن حافة الصفحة اليسرى 
عادة) 

تتعلق بأحداث الفأرة و تعيد الإحداثيات العمودية ¥ الخاصة 
بمؤشر الفأرة بالنسبة للصفحة (بعد مؤشر الفأرة عن حافة الصفحة 
العلوية عادة) 

تتعلق بأحداث الفأرة و تعيد الإحداثيات الأفقية × الخاصة بمؤشر 
الفأرة بالنسة للشاشة (بعد مؤشر الفأرة عن حافة الشاشة اليسرى 
عادة) 

تتعلق بأحداث الفأرة و تعيد الإحداثيات العمودية ¥ الخاصة 
بمؤشر الفأرة بالنسبة للشاشة (بعد مؤشر الفأرة عن حافة الشاشة 
العلوية عادة) 

تتعلق ببعض أحداث الفأرة و تعيد معرف العنصر الذي دخل إليه / 
خرج عنه مؤشر الفأرة لحظة تفحير الحدث 


تحتوي القيمة ©211<+ فى حال كون المفتاح +5234 مضغوطاً 


لحظة تفجير الحدث و تحتوي ©2315 فى الحالة المعاكسة 


type‏ تستعمل مع جميع الأحداث وتعيد اسم الحدث 


بالنسة لأحداث لوحة المفاتيح تعيد هذه الخاصية قيمة ال 
1 الخاصة بالمفتاح المضغوط , أما بالنسبة لأحداث الفأرة 
تعيد رقماً يمثل زر الفأرة المضغوط حيث أن الرقم 1 يمثل زر الفأرة 
الأيسر و الرقم 2 يمثل زر الفآرة الأوسط و الرقم 3 يمثل الزر الأيمن 


آخر ما يجب ذكره في هذه الدقائق هو أن المكتبة 3217 ©011( تعطينا إمكانية إلغاء الاستجابة 
الافتراضية للأحداث التي تملك استجابة افتراضية مثل حدث النقر على رابط معين إذ أنه 
يملك استجابة افتراضية تنقلنا إلى العنوان الذي يشير إليه » و تسمح المكتبة بإلغاء الاستجابة 
الافتراضية عن طريق الدالة غ preventDefaul‏ الخاصة بالكائن © و التي تستخدم 
كمايلي : 


(aA 61-211 (EUACE LOR (©) 1 


S.9 S VER E De AUL E (7 
}); 


و الآن نحن متأكدون أن الاستجابة الافتراضية لحدث النقر على الروابط فى الصفحة لن 


۰ 


تحدث . 
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من الدقيقة 75 إلى الدقيقة 87 : 


الحركات 


Animations 


: Animations الحركات‎ 

أما زلت تذكر ما قلت لك عند عرضنا لموقع +80312050821 كمثال فى مقدّمة هذا الكتاب ؟ 
حسناً .. سأذكرك أنني قلت لك : "لا تدع الجمال يخدعك" و قلت : "لا تعتقد أن ما تراه من 
عمل فلاش 71351" و قلت فى النهاية : "أغلب ما تراه من عمل المكتبة 217 ©3011" قلت 
كل ما سبق هكذا دون أي برهان و الآن حان الوقت لنبرهن ذلك سوياً . 


تؤمن المكتبة 217 ©3011 محموعة من الدوال الخاصة بالحركات 0125 23703631ظ و لعل 
أبسط أنواع الحركات تكمن فى إظهار و إخفاء العناصر إذ تؤمن المكتبة هاتين الوظيفتين 
السيطتين عن طريق الدالة 58501 التى تُستعمل للإظهار و الدّالة ©2310 التى تُستعمل 
للإخفاء و تستعمل الدالتان على الشكل : 

$ ) “2هغعع 1ه5'‎ ).show(); 
حيث يقوم هذا السطر بإظهار العناصر المخفية التى يعيدها المحدد 5616680 فى حين‎ 
: أن التعليمة‎ 


OE‏ اله 11-2 عترل كت 


تقوم بإخفاء العناصر التى يعيدها المحدد 5٠1٠٥٤١‏ و كثيراً ما يستعمل المبرمجون هاتين 
الدالتين فى إنشاء القوائم الشحرية 115165 1٤٥6‏ فى شىء شييه بالمثال التالى: 
<html>‏ 


<head> 


<script src=” jquery.]s” type=“”text/Javascript”> 
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</script> 
<script type=/”text/Jjavascript”> 
$ (document) . ready (function )( { 


$ ('li:has (ol) ' ( .css ( 'curosr’ ,'pointer’); 
$ (‘li:has (ol) `) .click (function )( { 


If ($ (this) .children () . 15 (`:hidden’ ) ) 
$ (this) .children () .show () ; 


else 


$ (this) .children () .hide () ; 
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E 


</script> 
</head> 


719656157 ©1112 16 511” 


<fieldset> 


>1ءوء1d<ةيرحشلا />مثال القائمة‎ 1e e1 d< 
SUL 
>11 < 1/>العنصر الأول‎ 1< 

العنصر الثانى < 11> 


<ol> 
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5 


<11/>عنصر فرعي < 11> 
<11/>عنصر فرعي < 11> 
<11/>عنصر فرعي < 11> 


<11/>عنصر فرعي < 11> 


<11/>عنصر فرعي < 11> 
ONS‏ 


GALLS 


< 1 1/>العنصر الثالٺ < 11> 


العنصر الرابع < 11> 


SOM 
>11 < 11/>عنصر فرعي‎ < 


< 11/>عنصر فرعي < 11> 


< 11/>عنصر فرعي < 11> 
</ol>‏ 


ILLS 


<1 1/>العنصر الخامس < 11> 


<1 1/>العنصر السادس< 11> 


JUL 


</fieldset> 
</body> 
</html> 
111 تحتوي الصفحة أعلاه قائمة غير مرتبة 13151 1720206260 من العناصر ممثلة بالوسم‎ 
يحتوي بعض عناصر هذه القائمة على قوائم مرتبة فرعيّة +1315 0260624 من العناصر‎ » 
. 01 ممثلة بالوسوم‎ 
بكوم ار‎ 
5 ) < ها‎ (OL) ”“ ( 658 ( CUEOSE , 521586127 8 
بتغيير شكل مؤشر الفآرة إلى الشكل المعبر عن إمكانية النقر و ذلك للعناصر التي يعيدها‎ 


المحدد (11:135)01 و الذي يعني عناصر الوسوم 11 التي تحتوي على وسوم 01 فرعية 
(راجع جدول المحدّدات) . 


بينما تقوم الأسطر التالية بإضافة الوظيفة الخاصة بالقائمة الشجرية إلى تلك العناصر : 
(EUACELOR (O) 4‏ 112 القن )€ (OL)‏ 151035 11" ) 5 


كات سو )5ل () ارخ صك !1 ات < زد لع ) 5ه 


5 652151 CALLAO (J o. SAO O 2 
else 


S(CEMLS) : ك2 () رت 2ك الراك‎ (J 
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إذ تقوم ببناء روتين (دالة) خاص بحدث النقر على تلك العناصر يقوم بإخفائها إن كانت ظاهرة 
وإظهارها إن كانت مخفية و هنا يجدر التنويه أن الدالة 15 إحدى دوال المكتبة 217 ©3911 
تقوم بإعادة القيمة هداعا إن كانت العناصر المطبقة عليها توافق المحدد الممرر لها و تعيد 
©2315 في الحالة المعاكسة , بينما تقوم الدالة 10432©1 23ح بإعادة العناصر الأبناء للعنصر 
المطبقة عليه و بناء على ما سبق يصبح معنى السطر التالي : 


LE (O ) رت‎ o CAL 1! شت صات‎ (J) 15 (CARLES ) ) 


"إذا كان أبناء العنصر كئذطع غير ظاهرين" » و لا يخفى عليك إن كنت قد قرأت الفصول 
السابقة أن العنصر 235+ هنا يعنى العنصر الذي وقع عليه حدث النقر. 


تومن المكتبة 1237 ©3011 دالة للقلب فى مثل هذه الحالة تشه دالة القلب فى حالة أوراق 
الأنماط اسمها © 206901 و تقوم هذه الدالة بإخفاء العنصر إن كان ظاهراً أو إظهاره إن كان 
مخفياً و لها الشكل التالى : 

8 1 6265613 ) “تدهوة 166 مه “7 5 


5 


حيث تقوم الدالة بقلب حالة ظهور العناصر التى يعيدها المحدد 56816820 و يمكننا 
تحسين مثال القائمة الشحرية بالاعتماد على هذه الدالة و اختصار شيفرة 27 ©9011( الخاصة 
به لتصبح كما يلى : 
4 0 عت 0 ع (OL) FY sSCLLECEK‏ 55 ال )0 5 
EOOGLS (YF‏ < إل SEALS) sCOAL LOOM‏ 


9 
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و هنا يظهر بوضوح صدق كلام فريق تطوير المكتبة 7[ ©3011 عندما طرح شعارها "اكتب 
أقل .. افعل أكثر" . 


و قد يقول قائل بعد قراءة الأسطر أعلاه : "نستطيع عمل هذا بساطة ! أين الحركة ؟" و هنا 
یحدر بنا أن نعترف أن الدّوال 5201 و ©2304 و 200961 عندما تُستدعی بدون أي وسيط 
فإنْها لا تعمل كحركات أبدا و إِنْما تقوم بإخفاء و إظهار العناصر بشكل جاف » و يمكن تحسين 
هذا الشكل بتمرير وسيط إلى كل من هذه الدوال يمثّل سرعة الحركة و عليه يصبح شكل 
الدوال كمايلى : 

5 ) " 5 1286م‎ EOE (١ «SAO ) 55646108 


5)  SELECEOE J MLAS) م‎ 


م 60 ق13)523 5699 S(SELECTEOL J.‏ 
حيث أن الوسيط 585660 يمثل سرعة تنفيذ المؤثر (زمن تنفيذ المؤثر في الحقيقة) و يمكن 
التعبير عن الوسيط 0 ©5856 بصيغتين : 
أ- صيغة نصية : و هى قيمة من القيم ٠51017“‏ التى تعنى تنفيذا بطيئاً للمؤثر أو 
7 502021" و التى تعنى تنفيذ المؤثر بالسرعة الطبيعية أو 83517" و التى تعنى تنفيذ 
المؤثر بشكل سريع. 
ب - صيغة رقمية : تمثل زمن تنفيذ المؤثر بالمللى ثانية (001 . 0 ثانية) و بالاستفادة من هذه 
المعلومة يمكن تحسين شيفرة 1227 ©2911 فى مثال القائمة الشحرية لتصبح كمايلى إذا عبرنا 
عن السرعة بالصيغة الرقمية : 


SCS LINNEA OL) YY : عات سنا 2 ) 12ت كلت‎ LOM (CY 1 
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SEALS) < CALLS (J < EOOGLE (LOOO) F 


J); 
: أو كمايلي إذا عبرنا عن السرعة بالصيغة النصية‎ 
SLIEMA (OL) FY ناي 17 ) 1816 الم‎ 6 1 OA ) 1 1 
S(EMLS) موت : () عات ! الت‎ 1-5) 
J); 
و الآن أصبح كل من الإخفاء و الإظهار يستغرق زمناً قدره ثانية واحدة (1000 مللي ثانية) و‎ 
. في هذه الحالة يبدأ جمال حركات 217 ©0911 بالظهور‎ 
آخر ما يجب الاعتراف به في سياق الحديث عن الدوال 520177 و ©2130 و 1eووہt هو‎ 
: أن لها شكلاً آخراً هو الشكل‎ 
5 (4+ عت 6ك 6 عه‎ J . SAOW (SESE, E) 2 


(4 SELECEOE 4) توا‎ EES, E) 2 


O(SSLECEOE ) .EOGGLS ) 856661 78‏ 
حيث أن الوسيط ۳ هو اسم دالة أخرى موجودة فى الصفحة يتم تنفيذها عند اكتمال تنفيذ 
المؤثر . 


مؤثرات التلاشی : 
و الآن يمكننا الانتقال للحديث عن دوال أخرى من دوال حركات 237 ©3011 مثل دالة 
الظهور المتلاشي 112 206 التي لها الشكل التالي : 
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1726115561 زر 186615127 مه ١”‏ 5 


حيث أن الوسيط الاختياري 585©6©0 يمثل سرعة تنفيذ المؤثر و ككل وسطاء السرعة فى 
دوال الحركات الخاصة بمكتبة 217 ©3011 يأخذ هذا الوسيط قيمة من القيم النصية 51018 أو 
normal‏ أوع 35 أو قيمة رقمية تعبر عن زمن التنفيذ بالمللي ثانية » في حين أن الوسيط 
الاختياري ۴ يمثل اسما لدالة موجودة فى المستند يتم استدعاؤها بعد انتهاء تنفيذ المؤثر. 
تذ کر : عندما نقول عن وسيط ما أنه وسيط اختياري © 23323306 056160231 فنحن 
نعنى أننا نستطيع عدم تمريره عند استدعاء الدالة. 
و على عكس دالة الظهور المتلاشى تقوم دالة الاختفاء المتلاشى غ011 ©2320 بإخفاء 
العنصر بشكل متلاش و لها الصيغة التالية : 

١56 158615612“ J) 1536156015 ) 5563© 151 8‏ )5 
حيث أن الوسيط 556640 يمثل سرعة التنفيذ (كالعادة) و الوسيط ۴ يمثل اسماً لدالة 
موجودة فى المستند تستدعى لحظة انتهاء تنفيذ المؤثر (كالعادة أيضا). 


توفر المكتبة 7[ ©3011 دالة أخرى خاصة بالتلاشى اسمها 220670 و هذه الدالة تقوم 
بتحديد درجة الشفافية لإ ذه ةمه الخاصة بالعناصر التى يعيدها المحدد و لها الشكل التالى 


5 ) 7“ SOLECEOE“ J. 155616506: 15:56 641 6956 م117‎ EY 2 

حيث أن الوسيط 50660 يمثل سرعة التنفيذ و الوسيط ۴ يمثل اسماً لدالة تستدعى لحظة 
انتهاء تنفيذ المؤثر أما الوسيط رع 5233© يمثل درجة شفافية العنصر التى سينتقل إليها أثناء 
تنفيذ المؤثر و يستقر عليها بعد انتهاء تنفيذ المؤثر و يمكن أن تكون درجة الشفافية بين 0 
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(شفاف لدرجة عدم الظهور) و 100 (ظهور بشكل طبيعي) » و يجدر الإشارة هنا أن الدالة 
220610 لا تقوم بحذف العناصر عند انتهاء الحركة كما تفعل 2206011 مثلاً . 


عع واه “Kf‏ 
مؤثرات الانزلاق : 
يتوفر في مكتبة إا ©3011 دوال خاصة بحركات احمل مثل دوال حركات الانزلاق و منها 
حركة الانزلاق السفلى 061772 ©5130 التى توفرها الدالة 1106100102 5 ذات الشكل : 
8 لمعك كرد ) لدان ساك ك1 للد : ) همع 56166 )1 5 
حيث أن الوسيط 585660 يمثل السرعة و الوسيط ۴ يمثل اسماً لدالة تُستدعى عند انتهاء 
المؤثر » كما توفر المكتبة دالة للانزلاق العلوي 135 ©5114 اسمها م10 ©5110 و لها 
الشكل : 
BF)‏ بك ع هه ) كنات 51 < ( SELECEOE‏ )1 5 
حيث أن الوسيط ٠٠۵‏ ط5 و الوسيط ۴ يمثلان سرعة التنفيذ و اسم الدالة التى تُستدعى عند 
الانتهاء من الحركة. 
و تقدم المكتبة دمجا للدالتين السابقتين بدالة قلب خاصة بهما اسمها الدالة 
11061760061 58 تقوم بإظهار العناصر المخفية باستخدام مؤثر 1010# ©5130 و إخفاء 
العناصر الظاهرة باستخادم مؤثر 175 ©5110 و لها الشكل التالى : 
(OSES, E) 2‏ 116160056912 8ق . EOE)‏ 1ق 5 4( 5 
و لا داعي لنتذكر معاً أن الوسيط 55660 يمثل سرعة التنفيذ و الوسيط ۴ يمثل اسم الدالة 
التى تستدعى عند انتهاء الحركة ©. 
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إيقاف الحركة : 
آخر دالة من دوال مكتبة 201137 الخاصة بالحركة هي الدالة م5608 و التي تستخدم 
ببساطة لإيقاف تنفيذ أي حركة قيد التنفيذ و تستخدم بالشكل : 


95 ) 7” 51-56 66127 م‎ SEO )1 78 


مرجع سربع لحركات المكتبة : 


بلخص الحدول التالى أهم دوال الحركات الخاصة بمكتبة 377 ©3011 : 


إظهار العناصر المخفية مؤثرات بسيطة 


إخفاء العناصر الظاهرة 


2206011 


Ee‏ تلاشى إلى شفافية محددة 


slideDown‏ مؤثرات الانزلاق 


مؤثرات الانزلاق 


slideToggle‏ انزلاق إلى الحالة المعاكسة مؤثرات الانزلاق 


إيقاف المؤثرات قيد التنفيذ 


إنشاء حركات خاصة : 
تسمح لنا مكتبة 79011©1237 بإنشاء حركات خاصة غير تلك الافتراضية التى توفرها عبر الدالة 
©2212 3 والتى تمتلك الشكل التالى : 

35646113 ,51-358 15126756312 ) 12:3118/53ق + ) 661127 561-386 4( 


حيث أن الوسيط 62+36©5ج5ه2م هو كائن 35011 (كالذي عرضناه سابقاً في الدقائق 
الخاصة بالدوال) يمثل مجموعة من الخصائص التي سيستقر عليها العنصر بعد انتهاء الحركة إذ 
أن فكرة الحركات الخاصة تكمن في الانتقال من الحالة الطبيعية للعنصر إلى الحالة الجديدة 
التي تفرضها الخصائص المزودة بواسطة الوسيط 2205628165 « lÎ‏ الوسيط speed‏ 
فإنه لا يزال يمثل سرعة الحركة و لا تزال القيم التي يستطيع أخذها كما ذكرناها سابقاً » من 
المهم أن نذكر هنا أن الخصائص التي يمكن للكائن 7520561283165 أن يحتويها هي 
خصائص الأنماط الخاصة بالعنصر و التي تأخذ قيماً رقمية فقط في العادة مثل +92 1هط و 
opacity‏ و top‏ وغده5126-2 .. إلخ أو أن تأخذ أسماء إحدى دوال المكتبة 
الخاصة بالحركة مثل 5120177 و © 260001 و hide‏ ... إلخ . 

حسناً .. كمثال أوّل على إنشاء حركة خاصة بنا سنقوم بإكمال نقص في حركات المكتبة يكمن 
في الحركة © 230670991 التي لم نر أنها موجودة بشكل افتراضي على عكس باقي 
مجموعات الحركات التي تمتلك كل منها دالة قلب و لبناء هذه الحركة الخاصة يمكن أن 
نكتب شيئاً كهذا : 


5 ) 7 55 1386 “قزرو‎ J) :لقنم‎ ) 165662517 5 EOL ١ م‎ ELON م‎ 
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كما تلاحظ هنا فإن الوسيط 55660 هنا يحمل القيمة 5120177 في حين أن الوسيط 
5ت هنا هو كائن 25011 التالى : 


©5646 1 67 £ 17ر56‎ ١ 


و الذي يعني قلب قيمة الخاصية 05361117 الخاصة بالعنصر في كل مرة . 


و كمثال آخر يمكن إنشاء حركة خاصة بنا تقوم بمضاعفة حجم العناصر ثلاثة أضعاف كما يلي : 
selector’ ( .animate )‏ '( $ 


) WICMERM 3 S(EALSJ MACRO) = 3F ¢ 


height: $ (this) .height ) * 3 } 

7 SLO NS 
و الآن أعتقد أن فكرة إنشاء الحركات الخاصة أصبحت واضحة إذ ينبغى فقط أن تزود الدالة‎ 
بمجموعة من القيم النهائية لخاصيات العنصر عبر كائن 35071 و يمكنك تحديد السرعة عبر‎ 
: الوسيط الثانى 0 ©5726 .. حظاً موفقاً‎ 
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من الدقيقة 87 إلى الدقيقة 110 : 
عير تقنية 23216 


التخاطب مع الخادم عبر تقنية ×۸[4 : 

أستطيع أن أتطاول على التقنيات الخاصة ببرمجة ال ط٥‏ لأقول : إن أي تقنية منهن لم 
تستطع أن تفتح آفاق تطوير تطبيقات ال اه۷ كما فعلت تقنية ×۸ ۸7. 

AJAX‏ اختصار ل Asynchronous Java Script And XML‏ و هي تقنية 
تسمح لتطبيق ال ط٥‏ بالتخاطب مع ال 5625761 عير إرسال طلبات غير متزامنة له تحري 
دون الحاجة لإعادة تحميل الصفحة مما يقرب المسافة بين تطبيقات الانترنت و تطبيقات سطح 
المكتب و بالطبع فإنّ اختلاف مستعرضات ال طع188 يجعل الأمور أكثر تعقيداً كعادته و كعادتنا 
سنلقى هذه التعقيدات خلف ظهورنا و نستعمل مكتبنا 277 ©3911 لتتولى أمر التعقيدات و تقدم 
لنا دوالاً بديلة بسيطة تلبّى حاجاتنا تماماً و تسمح لنا بالتركيز على هدف تطبيقنا فقط دون أن 


نشغل بالا بأي شىء آخر . 


ملحوظة : قد تكون هذه الدقائق هي الأصعب في الكتاب إذ أنّنا نناقش فيها استثمار المكتبة 
لتبسيط الشيفرات التي يكتبها مبرمجو 74# لكنّ هذا لا يعني أننا نغطي التقنية ۸74 و لا 
أي من تقنيات البرمجة من طرف الخادم فإذا لم تكن لديك خبرة في البرمجة من طرف 
الخادم ©5625 أو كنت ممن لا يعرفون 23276 فباستطاعتك أن تقرأ عنهما قبل قراءة هذه 
الدقائق فهما موضوعان خارج إطار هذا الكتاب و قد يحتاجان أكثر من كتاب لتغطيتهما » و إن 
كان الموضوع لا يهمّك تستطيع الانتقال مباشرة إلى دقائق الإضافات . 


تذكر : الأمثلة في هذا الفصل تتطلب وجود تطبيق من طرف خادم بعيد أو محلي . 
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حلب | لمحتوى من الخادم 5 
أول الدوال التى توفرها مكتبة 317 ©3011 لتأمين إرسال الطلبات غير المتزامنة للخادم 
ماع62 ھی الدالة 10308 التى لها الشكل التالى : 


USO EYE‏ ل ل 116 را يك اناك 


حيث أن الوسيط 1121 يمثل اسم الصفحة التي سيرسل إليها الطلب في الخادم ؛ في حين أن 
الوسيط الاختياري 580۸ هو كائن يمثل مجموعة من الوسطاء التي سترسل إلى الصفحة 
ذاتها في الخادم أما الوسيط الاختياري ۴ فهو يمثل اسما لدالة موجودة في الصفحة تُستدعى 
لحظة انتهاء تنفيذ الطلب و بعد قدوم الاستجابة من الخادم و يمكن تمرير استجابة الخادم 
كوسيط لهذه الدالة » و طبعاً أهم ما يجب ذكره أن الدالة 103240 تقوم باستبدال محتوى 
الكائنات التي يعيدها المحدد 5816680 بالمحتوى الذي سيعود من الخادم Server‏ 
نتيجة تنفيذ الطلب على شكل :81115 (في الحقيقة ستعود الصفحة المطلوبة كاملة) » و كمثال 
على هذه الدالة قد نكتب شيئاً كمايلي : 


$ ('#divA’ ( .load('myPage.aspx’ ); 


حيث ستقوم هذه الدالة باستبدال محتوى الوسم ذو المعرف 0315782 بمحتوى الصفحة 
2523 .10872306 الموجودة فى نفس مسار صفحتنا الحالية. 


و يمكننا التحكم بالعملية أكثر عن طريق تزويد الدالة بمحدد مع اسم الصفحة مما يسمح 
باستبدال المحتوى بالمحتوى المعاد من الخادم على شكل .1115145 و الذي يطابق المحدد 
فقط و عندها يمكننا كتابة شىء كمايلى : 


5 )' #divA’ ( . 10230 ) 'myPage.aspx a[href=www.aw.com]’ ( ; 
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حيث تقوم الشيفرة السابقة باستبدال محتوى الوسم ذو المعرف 4152 بالمحتوى الذي 
يطابق المحدد [181917.21.2010- 2 3|122 و الذي ستعيده الدالة 48 من الصفحة 


.my 1230© . 3 523 


و كمثال على تمرير وسطاء للصفحة الهدف في الخادم لنفرض أن الصفحة التي نريد استعادة 
قسم من محتواها تملك العنوان التالى : 


22-72 21-7571 52352 3 . © 230 1137/ 
عندئذ يمكننا أن نكتب الشيفرة التالية : 
(OE WM O CLE‏ ل 1/7156 ) اهمال (E OETA J‏ 


حيث أن الوسيط الثانى هنا هو عبارة عن كائن 35011 يمثل وسطاء الصفحة الهدف . 


ملحوظة : من المهم أن نذكر هنا أن المستعرض 0o٣٥‏ 1م183 1286226 يقوم بتخزين 
نسخة مؤقتة من الصفحات المطلوبة ©ع3© لذا إن كانت الصفحة التي تنوي جلب 
معلومات منها متحددة بشكل سريع مثل صفحات أسعار العملات مثلاً > عندها احرص على 
تزويد وسيط ذا قيمة تتغير عشوائياً للدالة لأن هذا يجعل المستعرض سالف الذكر يعتبر كل 
طلب منها صفحة مستقلة عن الأخرى و بالتالي لن يوثر عمل 030 لإحدى الصفحات على 
عمل المتبقي منهن . 
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تمرير وسطاء للخادم من حقول النماذج : 

غالباً ما نمرر إلى الدالة 1034 قيماً من أحد نماذج الصفحة ۴٥۳۳5‏ كوسطاء للصفحة 
الهدف عبر استعمال دالة أخرى من دوال المكتبة هى الدالة ©2 562312131 فمثلاً 
لاستدعاء الصفحة 10287230©.357236 مع وسطاء قيمهم قادمة من النموذج ذو المعرف 
7172 يمكن أن نكتب مايلى : 


5 (CFO 1ت 1 )ا , ل 6ت ل ال‎ ) o SEK !تل‎ ZE (J) J 


و ستتولى الدالة ه2 5623313 فى هذا المثال توليد كائن 35011 المناسب للدالة 1030 
و الذي سيمثل وسطاء الصفحة الهدف ×مكه. 121377230 . 


ملحوظة : في حال تزويد قيمة للوسيط الاختياري 350177 ستقوم الدالة بإرسال الطلب 
بالطريقة 051 و في حال عدم تزويد قيمة لذات الوسيط ستقوم الدالة بإرسال الطلب 


. G٤1 بالطريقة‎ 


ا, سال طلبات من النوع G٤1‏ : 


تسمح لنا المكتبة 30137 بإرسال طلبات غير متزامنة من نوع محدد من النوعين G٤۲‏ و 
31 عبر مجموعة من الدوال منها الدالة +1 58.02 التي تقوم بإرسال طلب غير متزامن من 
النوع 6۴١‏ إلى الخادم و تعيد كائناً يمثل الاستجابة التي أعادها الخادم و لهذه الدالة الشكل 
التالي : 


5 026 (UE Ly, VOOM, ا‎ 
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حيث أن الوسيط 1121 يمثل اسم الصفحة التي سيرسل إليها الطلب في الخادم و يمثل 
الوسيط الاختياري 350171 مجموعة من الوسطاء التى سترسل إلى الصفحة ذاتها فى الخادم 
أما الوسيط الاختياري ۴ فهو يمثل اسماً لدالة موجودة في الصفحة تُستدعى لحظة انتهاء تنفيذ 
الطلب و يمكن تمرير استجابة الخادم كوسيط لهذه الدالة. 
و هنا يجدر التنبيه أن هذه الدالة تعتبر من دوال 7[ ©3011 الوظيفيّة (مجموعة من دوال 
المكتبة نُستدعى مباشرةً دون الحاجة للمحددات و يكون لهذه الدوال الصيغة ×.$ حيث أن 
× هنا يمثل اسم الدالة) . 
و كمثال على استخدام الدالة الوظيفية + »5.06 قد نكتب مايلى : 
50 
/myPage.phPpP'’ ,‏ ' 
ل ةا 
(OEE) (Le E (OEE) 2 J‏ كت 276621 8 


J2 
: حيث أن تنفيذ الشيفرة السابقة يرسل طلباً غير متزامن إلى الصفحة‎ 
/myPage.php?p1=10&p2=cat 


و يأخذ القيمة التى تعيدها هذه الصفحة ليسندها للكائن ههل الذي يمثل وسيطاً لدالة 


بسيطة تقوم بعرض قيمة هذا الوسيط فى صندوق رسالة . 
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إرسال طلبات من النوع P051‏ : 
و فى سياق مشابه للدالة الوظيفية +5.6©1 تقوم أختها الدالة الوظيفية +5.5051 بإرسال طلب 
غير متزامن من النوع 2051 إلى الخادم و شكلها التالى مشابه لشكل أختها : 


5 عتم‎ (Ol A 7 الف دك‎ E) 


حيث أن الوسيط 1121 يمثل اسم الصفحة فى الخادم › و 35011 يمثل وسطاء هذه الصفحة › 
و ۴ يمثل اسماً لدالة تستدعى عند انتهاء تنفيذ الطلب و يمكن أن تمرر استجابة الخادم 
كوسيط لها . 


إرسال الطلبات لخادم معلوم نوع الاستجابة : 

من الممكن أن يعيد التطبيق الموجود في الخادم استجابته في أي شكل يحدده مبرمج هذا 
التطبيق ؛ فإن كنا على بينة و يقين أن التطبيق الذي نرسل إليه الطلب سيعيد استجابته 
بالتمثيل 350131 فإن المكتبة 37 ©3013 توفر دالة خاصة لمثل هذه الحالة تشابه كثيراً الدالة 
الوظيفية 5.6616 عدا أنها مصممة لاستعادة كائنات 35011 » هذه الدالة تحمل الاسم 
5.617 ولها الشكل التالي : 


EOE EJ SON (UIE, JOON, 8 


حيث أن الوسيط 1121 يمثل الصفحة الهدف فى الخادم و 380١‏ يمثل وسطاء هذه الصفحة 
أما الوسيط ۴ فيمثل اسما لدالة فى المستند تستدعى لحظة انتهاء الطلب و يمكن أن يمرر لها 
وسيط يعبر عن استجابة الخادم و يكون هذا الوسيط كائناً من كائنات 35011. 


91 


وما دمنا فى سياق الحديث عن الدوال الوظيفية الخاصة ب 2381 فى مكتبة 237 0116 j‏ فلا 
ضير أن نمر على الدالة +721 ذ٤إc‌S‏ ع و.$ التى تقوم بجلب ملف 50237216 33373 من 
الخادم و تنفيذه داخل الصفحة بشكل غير متزامن و هذه الدالة لها الشكل : 


5 6 عاك ند سكت 6ت‎ (E E 


حيث أن الوسيط 1121 يمثل ملف ال +5232 332 فی الخادم و يمثل الوسيط ۴ اسما 
لدالة موجودة فى المستند تستدعى لحظة اكتمال الطلب . 


التحكم الكامل بطلبات ×۸[۸ : 

حسناً .. كما أن المكتبة 7[ ©011 j‏ تمنحنا دوالاً بسيطة لإنشاء طلبات 272076 غير متزامنة فإنها 
تمنحنا دالة تتيح لنا إنشاء طلبات 2327 مع التحكم الكامل بكل ما يتعلق بكل من هذه 
الطلبات » هذه الدالة هى الدالة الوظيفية ×ة 5.23 و التى لها الشكل العام التالى : 


5.3 3 (options); 


حيث أن الوسيط 05830125 هو عبارة عن كائن 35011 يمثل محموعة الخيارات الخاصة 
بالطلب و التى سيتم تنفيذه بناءً عليها . يوضح الحدول التالى خيارات الدالة الوظيفية 


:5.33 33 


رابط الصفحة التي سيرسل إليها الطلب 
في الخادم 


طريقة إرسال الطلب » 6٤۲‏ أو ۲0581 


كائن 350131 


dataType 


timeout 


Success 


complete 


beforeSend 


كائن 35011 يمثل محموعة وسطاء 
الصفحة التي سيرسل إلبها الطلب 

قيمة من القيم التالية التي تعبر عن نوع 
البيانات التي نتوقع أن يعيدها الخادم و 
الأنواع هي : 3045 و 35011 و 
SCRIPT‏ و1221 


يمثل الزمن الأعظمي لتنفيذ الطلب 
بالمللي ثانية فإن لم يتم اكتمال الطلب 
خلال هذا الزمن فإن الدالة تقوم بإلغاء 
الطلب معتبرة حدوث خطأ ما 


دالة يتم استدعاؤها لحظة اكتمال 
الطلب بنجاح 

دالة يتم استدعاؤها لحظة حصول خطأ 
ما فى الطلب 

دالة يتم استدعاؤها لحظة اكتمال 
الطلب سواءً أتم بنجاح أم لا 


دالة يتم استدعاؤها قبل إرسال الطلب 
تماماً 


عندما تسند إليها القيمة ©1211 يتم 
إرسال الطلب بشكل غير متزامن و هي 


الحالة الافتراضية و العكس فى حال 
إسناد القيمة ©8315 

processData‏ بشكل افتراضى یتم ترميز البيانات 

المرسلة بواسطة الوسيط 4383 إلى 


ترميز ملائم لمستعرض ال Web‏ و ھی 


5 


الحالة ذاتها التى تحدث عند إسناد 


القيمة ©8211 لهذه الخاصية و العكس 
عند إسناد القيمة ©5 1221 


و كمثال على استخدام هذه الدالة قد نكتب شيئاً مماثلاً لما يلي : 


UEL 777/57126633859” ¢ 
EVDE EGS 
dataType : °`XML’ 


} 
J;‏ 
و من الحدير بالذكر أن المكتبة 17 ©3011 تسمح لنا بتعيين إعدادات افتراضية لكل الطلبات 
المرسلة عبر الدالة 33 5.33 عن الطريق الدالة الوظيفية طا ©3325 5.33 التى تمتلك 
الصيغة التالية : 
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$.ajaxSetup (properties); 

حيث أن الوسيط 5© 22026213 هو كائن 35011 يمثل مجموعة الخاصيات التى ستصح 
افتراضية للدالة 5.232 و يمكن أن يحتوي الوسيط 62+31©5مه2<0م الخيارات ذاتها 
الموضحة في الجدول السابق » و كمثال على عمله يمكن أن نكتب شيئاً مشابهاً لمايلي لتغيبر 


الإعدادات الافتراضية الخاصة بالدالة ×ة 5.323 : 


$.ajaxSetup ) 
1 
EOS EMMY | 
dataType :*XML’' , 
CIEE OE BUM عات‎ 16 COE) 


31 كعات ) عا كت‎ Me SSAC MS : 7 256 


}, 


timeout :10000 


الأحداث الخاصة بطلبات :4187 : 
آخر ما يجب ذكره فى سياق الحديث عن استثمار مكتبة 317 ©3013 لكتابة شيفرات 273287 
هو أن المكتبة تمتلك مجموعة من الأحداث الخاصة بطلبات ۸74 و التى تستثمر تماما 
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كاستثمار الأحداث الأخرى التى كنا قد مررنا عليها ف دقائق الأحداث Events‏ والحدول 
التالى يوضح هذه الأحداث : 


اسم الحدث ظ لحظة التفحير 


غ32 325 33 عند بداية إرسال أي طلب من طلبات 
AJAX‏ 


ajaxStop 


5 2 5 عندا انتهاء تنفين أي من طلبات 23236 
بنجاح 


الآن أستطيع أن أقول أننا انتهينا من تعلم كيفية استثمار مكتبة ال ط٥۷‏ الرائعة 217 ©3011 
لتنفيذ طلبات 23236 و هكذا نصل إلى نهاية الدقيقة 110 و بما أننا اتفقنا على 120 دقيقة 
في بداية الكتاب سنخصص الدقائق المتبقية لاستعراض أهم إضافات المكتبة و تعلم كيفية بناء 
إضافات خاصة بنا . 
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من الدقيقة 110 إلى الدقيقة 120 : 
الإضافات 
Plugins‏ 


الإضافات ءہugiاp‏ : 

يسمح لنا فريق تطوير المكتبة 3217 ©7011 بمشاركته فى الإبداع و الابتكار بفتح باب توسعة 
المكتبة عبر ما يعرف بالإضافات 71116311225 إذ يمكننا إنشاء إضافة خاصة بنا توسّع عمل 
المكتبة في أي من نواحي عملها و من ثم مشاركة هذه الإضافة مع جميع مستخدمي المكتبة 
عبر تبويب الإضافات فى موقعها الإلكترونى على العنوان 011 237.6 ©11© (. 2111631115 . 
عند الحديث عن الإضافات هناك طريقان يسلك المتحدث أحدهما » الطريق الأول : الحديث 
عن كيفية كتابة الإضافات الخاصة بالمكتبة و هنا نضطر للعودة إلى لغة خم ذ٣إc؟S‏ 3353 
التقليدية » أما الطريق الثاني : الحديث عن استخدام إضافات 2137 ©3011 الموجودة أصلاً و 
هذا هو الطريق الذي سنسلكه فى هذه الدقائق أولاً . 

فى الحقيقة ليس هنالك طريقة ثابتة لاستخدام جميع إضافات المكتبة فالطريقة تختلف من 
إضافة إلى أخرى و لكن بشكل عام يمكننا القول : 

لاستخدام إضافة من إضافات 01162137( الموجودة يكفى أن تقوم بتحميل هذه الإضافة التى 
تأتي على شكل ملف 5٠237216‏ 3333 ثم تقوم بتضمينه ضمن صفحة ال اه۷ الخاصة بك 
بعد تضمين المكتبة و هذه نقطة هامة إذ أن الإضافات نى بالاعتماد على المكتبة و بالتالى 
عليك التأكد من تضمين المكتبة أولاً » بعد تضمين الإضافة سيصبح هناك دوال جديدة تضاف 
إلى دوال المكتبة الأصلية و توسع عملها و يمكنك استخدامها بنفس طريقة استخدام دوال 
المكتبة التى شرحناها فى دقائق الحديث عن الدوال . 

حسناً .. هذا الكلام كلام عام لا يغنى عن قراءة التوثيق الخاص بكل إضافة و الذي لا يتجاوز 
الصفحة عادة , و الآن يمكننا البدء فى استعراض بعض إضافات المكتبة على سبيل المثال لا 
على سبيل الحصر و التمييز . 
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: jQuery user Interface الإضافة‎ 


ف 


Query UI - Home J .۴٠٠۷٤( متتنيات منبنة أبوكعان‎ ۷, Ayan load - Query levaSc مره دورق‎ - 5 


د 5 2 


Build custom download 


Recent activity 
JQuery U 1.7.2 is now out 
What's new © 


JQuery Ul 1-6 legacy release 
finalized. Learn more © 


werful theme framework Flexible & easy to lean 


filament group 


تعتبر هذه الإضافة الأكثر شعبية بين جميع إضافات المكتبة على الإطلاق إذ تعد بتقديم 
واجهات استخدام أنيقة و غنيّة لصفحتك (بعضها كتلك التي رأيناها في موقع الشركة العملاقة 
Microso £٤‏ و هذا ما يعنيه اسم الإضافة , و تقدم الإضافة مجموعة من الأدوات الحاهزة 
القابلة لإعادة الاستخدام و التي تمنح واجهة التطبيق الخاص بال ط۴6 مرونة عالية لدرجة 
تجعله مشابها تقريباً لتطبيق سطح المكتب من ناحية واجهة الاستخدام › فهي تقدم الألسنة 
65 و أشرطة التمرير 325ط 522011 والأوكرديونات 322202031025 والمزاليج 
5 و أدوات اختيار التاريخ 31-1625م 412366 و أدوات اختيار الألوان 
c5‏ ذم :اده و الكثير غيرها » كما تضيف الأداة قدراتٍ خاصة لعناصر الصفحة لا 
تتوفر فيها بشكل طبيعي مثل القدرة على سحبها و إفلاتها أو إعادة ترتيبها أو تغيير حجمها أو 
الاختيار منها و الكثير الكثير و يجدر الإشارة أن هذه الإضافة قابلة للإكساء و هي تمتلك عدة 


إكساءات حاهزة 1161265 بشكل افتراضى . 
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يمكن الحصول على هذه الإضافة المجانيّة عن طريق الدخول إلى موقعها 
.28/113 116 ز www.‏ ثم النقر على الزر Build Custom Download‏ . 


الإضافة :jquery Form‏ 
تعطي هذه الإضافة مزيداً من المرونة عند التعامل مع النماذج ۴٠٣١5‏ إذ أنها "تكمل النقص 
الموجود في دوال مكتبة 7[ 0116[ الخاصة بالتعامل مع النماذج" على حد قول مبدعيها » و 
تنقسم دوال هذه الإضافة إلى عدة مجموعات منها ما يسمح باستعادة القيم الخاصة بأدوات 
النماذج بطريقة أبسط من طرق المكتبة و يظهر ذلك جلياً عند الحديث عن أداة نموذج مثل 
الأداة <8ع561©6> » ومن هذه المجموعات ما يسمح بإعادة تعيين (تفريغ) قيم أدوات 
النموذج › و منها ما يسمح بإرسال قيم النموذج إلى الخادم بطريقة تقليدية و باستخدام 

23315 » يمكن تحميل الإضافة من الموقع : 


http://www. jJquery.com/plugins/project/form 


الاضافة :jmaxinput‏ 
هل سبق و قمت بزيارة الموقع 


JMaxInput 
الاجتماعي الشّهير © غ71 ؟ هل‎ 


العدا characters‏ 92 لذن “ طريقة عرض مربعات إدخال 
از ص فى ذلك الموقع انتىاهك ؟ 
update |‏ | إن ت من ۱ 5 جر بعيغية 
رات النصوص تلك فإنَّ هذه الإضافة تحعل العملية أسهل من السهولة وت تحعلك تتبع 
الطريقة التي علمتنا إِيّاها 7اة ©3011 ألا وهي طريقة "إلقاء التعقيدات وراء ظهورنا" على حد 
قولي »› يمكن تحميل الإضافة من الرابط : 
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http: //plugins.jquery.com/project/jJMaxInput 


الإضافة :jquery short access‏ 
تسمح هذه الإضافة الرائعة بتعيين مفاتيح اختصار للروابط الموجودة بالصفحة إذ يمكن مثلاً 
أن يكون المفتاح © مفتاح اختصار للرابط الذي يقود لموقع مايكروسوفت مثلاً » و يكون 
المفتاح × مفتاح اختصار للرابط الذي يقود لموقع مكتبة 7ا0 ©3011 و هكذا › الجميل في 
هذه الإضافة أنْها تتفهم متطلبات 23207 جيّداً فلا تفسد عملها ! » يمكن تحميل هذه الإضافة 

من الرابط : 


http: //plugins.jquery.com/project/shortaccesskey 


‘jquery corner الإضافة‎ 


أصبح من الشائع في جميع مواقع ال ام۷ 
جيّدة التصميم ألا تكون أركان (زوايا) أقسام 
الموقع بشكل ركن المربّع التقليدي و إِنّما 
بأشكال مختلفة لعل أشهرها الشكل 
الدائري Round Corner‏ 2 يمكن 
إنشاء هذه الأركان بطرق مختلفة أسهلها 
استخدام هذه الإضافة التي يمكن تحميلها 
من الرابط : 


http : //www.malsup.com/ j query/corner/ 


:beauty tips الاضافة‎ 


تسمح هذه الإضافة بإظهار شرح مختصر 


Customizing thg 


tooltip This popup‏ حميل جداً عند وضع المؤشر 
E ٤ : balloon is‏ 
able‏ 3 على عنصر معين من عناصر الصفحة و يمكن 
configurable.‏ إن إظهار هذا الشرح بالشكل الذي ترغب به 
be sent tf‏ أ تماماً إذ أن الإضافة تعطى لمستخدمها 
خيارات كثيرة لتخصيص شكل الشرح المختصر بما يتلاءم و موقعه » يمكن تحميل هذه الإضافة 
من الرابط : 


http: //www.lullabot.com/files/bt/btlatest/DEMO/index.htm 
1 


الإضافة B0×¥‏ : 
Send Feedback‏ تسمح هذه الإضافة بإنشاء مربعات حوار منيثقة 
٠‏ إ شاع انتشارها كثيراً فى المواقع الحديثة فى 
boxy‏ 
Your name and/or email‏ الغترة الأخيرة ٤‏ 9 ھی مشابهة لتلك التى نراها 
فى أغلب المواقع العالمية ى Facebook‏ 


على سبيل المثال بطريقة بسيطة . 


Comment: 


يمكن تحميل هذه الإضافة من الرابط : 


http: //plugins.jquery.com/project/boxy 
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الإضافة ajax fancy captcha‏ : 
في كثير من المواقع الحديثة يلجأ المبرمجون 
إلى استخدام "كود التأكيد" لتفادي ما يعرف بال 
5 › تؤمّن 217 ©3011 إضافة تسمح لا 
2 0000002002 | بإضافة هذه الإمكانية في موقعنا بشكل عصري 
اها |» ]إو )محال أجمل من الشكل التقليدي "ظهور صورة غير 
مفهومة مثلاً" فهي تطلب سحب عنصر معيّن و 
إفلاته في المنطقة المخصصة و بالطبع هذا العنصر يختلف من دخول إلى آخر فقد يطلب مثلاً 
سحب شكل المقص و إفلاته في المنطقة المخصصة في الدخول الأول و قد يطلب منك 
سحب شكل الساعة و إفلاته في المنطقة المخصصة في الدخول الثاني و هكذا .. فإن كان زائر 
موقعنا من ال 805 فإنّه لن يتحاوز هذا الاختبار السيط جداً بالنسبة لابنك أو لأخيك الصغير. 


يمكن تحميل هذه الإضافة من الرابط : 
http : //www.webdesignbeach.com/beachbar/aj ax-fancy-‏ 


captcha-jquery-plugin 
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الإضافة :Gallerific‏ 
: فل تسمح لنا هذه الإضافة بإنشاء معرض صور 
بالميزات الأساسية التي تتوفر في معارض 
الصور على الانترنت ببساطة شديدة » يمكن 

تحميلها من الرابط : 


http : //www.twospy.com/ga 
lleriffic/ 


Title #7 


Description 


| لمزيد من الاضافات ؟ 

ما عرضناه فى الدقائق القليلة الماضية يعتبر أنموذجاً فقط من الإضافات الكثيرة جدا الخاصة 
بالمكتبة و التي يمكن أن نطلع على آخر ما يضاف إليها عبر ركن الإضافات في موقع المكتبة 
على العنوان : 


http: //plugins.] query.com 


و الآن و بعد أن رأينا جمال إضافات المكتبة حان الوقت لنتعلم كيفية إنشاء هذه الإضافات. 
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كيفغية انشاء الإضافات 125ع111م : 
كما قلنا سابقاً فإن الإضافات توسّع عمل المكتبة فى أي من نواحى عملها و يعطينا فريق تطوير 
المكتبة الحرية الكاملة فى توسعة عمل مكتبته شرط اتباع مجموعة من القواعد التى نناقشها 
فى هذه الدقائق . 


تسمية ملغات الإضافات : 

كنت قد ذكرت فى مقدمة هذه الدقائق أن الإضافة ما هى إلا ملف 562317216 03573 يتم 
تضمينه بعد المكتبة و يبنى بالاعتماد عليها و بما أن محال كتابة الإضافات متاح للجميع فإن 
فريق تطوير المكتبة ينصح بتبنّى طريقة التسمية التالية للملفات و هى ليست قاعدة و إنما 
نصيحة أصحت غرفاً فيما بعد : 

"سم ملف الإضافة الخاصّة بك باسم من الشك ل النالى : 5 0.3 7.<11191[ 0112 3" 

حيث أن 111032ص هو اسم إضافتك » فمثلاً لو قمت بإنشاء إضافة تحمل اسمى يجب أن 
أسمّى الملف الذي يحتوي إضافتى بالاسم 5ز .اھ٤‏ 30.115 ©3011 إن كنت ممن 
يستمعون قول فريق تطوير المكتبة و بتبعون أأمنه . 


الشكل العام لشيفرة الإضافة : 
حسناً .. بعد أن أنشأنا الملف الخاص بإضافتنا بالاسم الذي نصحنا به فريق تطوير المكتبة 
سنكتب فيه شيفرة برمجية لها الشكل العام التالي : 
| د ) 6260 ) 
شيفرة إضافتنا ستكون هنا 


J) (TOU) f 
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بهذه الطريقة نضمن أن الدوال التى سنقوم بتعريفها فى المنطقة المخصصة لنا ستضاف إلى 
المكتبة و نضمن أننا سنستطيع استدعاءها بطريقة استدعاء دوال المكتبة الأصلية . 


طريقة بناء دوال الإضافات : 
إذا كنت تذكر حديثنا فى الدقائق الماضية أحمعها منذ بداية الكتاب فمن المفترض أنك الآن 
تعرف تماما أن المكتبة تمتلك نوعين من الدوال : نوع أول يطبق على مجموعة من عناصر 
المستند بالتعاون مع المحدّدات و نوع ثان أطلقنا عليه لقب "الوظيفى" يُستدعى دون مساعدة 
المحدّدات » حسناً تختلف طريقة بناء دوال الإضافات باختلاف هذين النوعين فلبناء دالة 
جديدة من النوع الأول الذي يطبق على مجموعة من عناصر المستند بالتعاون مع المحدّدات 
فإننا نتبع الشكل العام التالى : 
(EAC ELO (9)‏ 
$.E = function (Parameters)‏ 
{ 
جسم الدالة هنا 
j;‏ 
I) (IOUS)‏ 
حيث أن ۴ هو اسم الدالة الحديدة و 2323106625 هى قائمة الوسطاء التى تأخذها 
هذه الدالة. 
أمّا عند بناء دالة وظيفية جديدة من النوع الثاني الذي تطبّق دواله دون استخدام 
المحدّدات نتبع الشكل العام التالى : 


)5 116 LE LOR (9S) ! 
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SESE لكان 12 ك‎ ELO (DEERE EES) 
1 
حسم الدالة هنا‎ 
م‎ 
}) (jQuery); 
حيث أن ۴ هو اسم الدالة الجديدة و 223231068625 هي قائمة الوسطاء التي تأخذها‎ 
هذه الدالة.‎ 


أمثلة على إنشاء إضافات خاصة : 
حسناً .. الأفكار السابقة هي الأفكار الرئيسية لبناء الإضافات و كمثال على بناء دالة وظيفية 
جديدة بسيطة جداً يمكن أن نكتب مايلي : 
FREE OM (O) 1‏ ( 
$.ourMessage = function (msg)‏ 
{ 
(f‏ ل WELE MNES E‏ 


alert (m) ; 
1 


j)» (IOUS) £ 


وكما هو واضح تقوم هذه الدالة بعرض رسالة معلومات تحتوي على قيمة الوسيط الممرر إليها 
والآن يمكننا أن نحرب إضافتنا بكتابة شيفرة 207 ©3011 كمايلى : 
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مرك U‏ ميته HELLO‏ ) 11553563 112ناووة 


و كمثال على دوال النوع الآخر التي تطبق على عناصر المستند التي يعيدها المحدّد سنقوم 
بكتابة دالة جديدة تغيّر نوع الخط الخاص بجميع العناصر التى يعيدها المحدد إلى النوع 
1 و ستكون شيفرة هذه الدالة كمايلى : 

(EME E LOR ) 51 1 


5 11-6122168 17 تنب 612 قزة‎ 6 E LOR () 


{ 
EEE MN LMI CESS (EOE EMI LYE, ANAL 

م 
(JQuery);‏ )} 
لاحظ أننا استعملنا الدالة 55ء إحدى دوال 037 ©3012 التي كنا قد ناقشناها سابقاً في دقائق 
الحديث عن الدوال و ما يحب ذكره هنا هو استعمالنا للكلمة 26111112 قبل استدعاء الدالة 
لكي نسمح لدالتنا أن تستدعى مع الدوال الأخرى المعتمدة على المحدّدات فلو أردنا اختبار 

دالتنا مع دالة أخرى الآن يمكننا أن نكتب بساطة : 


(MENT J 5قة قرت داه‎ () «EAE LA ) 1 8 


مما سيؤدّي إلى تطبيق حركة الظهور المتلاشي بعد تغيير نوع الخط و يجدر بنا أن نذكر هنا 
أن دالتنا حالياً تستطيع التعامل مع كائن واحد فقط من كائنات المستند و لهذا استعملت 
محدّداً يعيد كائناً واحدا فى المثال (أعنى المحدد #2417:8357) . 
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و بالطبع يمكن تحسين الدالة بمثل كل الحالات المشابهة السابقة بالاعتماد على الدوران 
اcھe‏ ليصبح شكل دالتنا النهائى هو : 
(EURNTE LOR (O) 1‏ 


51 206 ك 1215© 2167315 ها‎ EAC Ê LO ) 1 
return this.each (function () { 


SCENTS) 683 (EOE 1ت‎ 1 , ENAM YS 


9E 
8 


(( (IOUS) f 


و هكذا تصبح دالتانا السابقتان جاهزتين للنشر فى إضافة لن يستخدمها أحد لأنها إضافة لا تقوم 
بأي شىء جديد عدا تعليمنا كيفية بناء الإضافات © . 


الخاتمة : 
والآن وقد شارفنا على الدخول في الدقيقة 121 يجدر بي أن أطفئ الأنوار و أسحب بهدوء 


و لكن بعد الاعتراف بأنني لا أزال أتعلم و أرحّب بأي استفسار و بكل من يريد أن يتواصل معي 
عبر البريد الإلكترونى com‏ . 4120110311 5 2_5 63 12011 


برمجة ممتعة ... و إلى لقاء قادم في دقائق أخرى بإذن الله. 
تم بحمد الله عز و جل 


دمشق 8/1/2010 
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حدها المحتويات 


أساسيّات JQUERY‏ ل 
تثبيت رإەںوز و تضمينها في صفحتك SR ORE OE‏ 
أساسيات وده ىود E OS CO O O O‏ 
المزيد من الأمثلة ؟ N O O ooh‏ 000001 
طريقة استعمال روهدتو د O DL N O Va‏ 
ما معنى الشيفرة السابقة ؟ LIAS AEA SES ES‏ 
المُحَدّدات REE OCONEE REE LOE SELECTORS‏ 1 
المُحَدّدات OS EO DR E‏ 01010011 
توليد محتويات ,20م جديدة OR O SO Ca‏ 
الذَوال O E FUNCTIONS‏ ا 
الذوال LEE SENS Functions‏ ف ام م CE‏ 
دوال التعامل مع واصفات الوسوم E OTE Attributes‏ 
دوال التعامل مع الأنماط و 5+1 aS‏ ا 
دوال التعامل مع محتوى عناصر المستند Inner content‏ م ا 4417 
دوال التغليف وہ مم د57 متف دن تماد كياك موسو اام ولق ا ا مه 51 
دوال حذف عناصر المستند E TL O TS‏ 
دوال التعامل مع عناصر النماذج a FORM ELEMENTS‏ 5 
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Se RN N [ [| [1 [1 [1 ON EC N OO CRS EVENTS الأحداث‎ 


ANIMATIONS ٽlكرکلا‎ 
. . Animations الحركات‎ 


إنشاء حركات خاصة 


التخاطب مع الخادم عبر تقنيّة 41[ 


جلب المحتوى من الخادم د 


تمرير وسطاء للخادم من حقول النماذج OTN EES‏ يك 


إرسال طلبات من النوع 5ج 
إرسال طلبات من النوع 57و20 


التحكّم الكامل بطلبات ينونج 


الأحداث الخاصة بطلبات ×۸3 


ع الاستجابة ارج جد تسوج خاب ماو وا e‏ 


الإضافات PLUGINS‏ 8-بتبتتت31ظ ظ < < +ذز+“ذز+ز “ز+ز +<ز ز ز ز EOE E‏ 
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الإضافات 25 31ني111م 


jQuery user Interface الإضافة‎ 


الإضافة E ES O DE E A AS E E rd JQuery Form‏ 
الإضافة jJmaxinput‏ ان ا و کے د و ال بن 
الإضافة EASES SR Er e JQuery short access‏ لبا تسق EES e7‏ 
الإضافة JQuery corner‏ كن أياسي كي جلن ناوه كوو تيد أو جه وا بف و كلق لو وسو "ام راف وه | 


الإضافة a beauty tips‏ نسم ERE EEE ESS‏ ور لور ان وتو ل ال 


الإضافة امه 


الإضافة AJAX fancy captcha‏ عد اط ول جز E EEE E‏ بالا و جو و م ل E E E‏ 


الإضافة ه2121 ه6211 ل ااي ال ل ا جر و 


المزيد من الإضافات ؟ 
كيفية إنشاء الإضافات ومذوں1م 


تسمية ملفات الإضافات 


الشكل العام لشيفرة الإضافة متكت ARR‏ رموه سس سو يه و 


طريقة بناء دوال الإضافات 


أمثلة على إنشاء إضافات خاصّة 
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